Pill

A small tinted label for a status or a category.

Overview

A short word that says what state or kind something is: paid, draft, flaky.

Status

Do
PaidDueOverdueDraft
import { Cluster, Pill } from "@hackcove/ui";

<Cluster>
  <Pill tone="emerald" dot>
    Paid
  </Pill>
  <Pill tone="amber" dot>
    Due
  </Pill>
  <Pill tone="red" dot>
    Overdue
  </Pill>
  <Pill dot>Draft</Pill>
</Cluster>
The tone carries the meaning: emerald for done, amber for waiting, red for failed, slate for neutral.
Don't
PaidDueOverdue
import { Cluster, Pill } from "@hackcove/ui";

<Cluster>
  <Pill tone="violet" dot>
    Paid
  </Pill>
  <Pill tone="violet" dot>
    Due
  </Pill>
  <Pill tone="violet" dot>
    Overdue
  </Pill>
</Cluster>
One tone for every status says nothing: a reader cannot tell Paid from Overdue at a glance. Pick the tone by what the status means.

Link

Do
import { Pill } from "@hackcove/ui";

<Pill href="#flakes" tone="amber" round>
  3 flaky
</Pill>
A Pill that goes somewhere takes href: it dims on hover and carries the focus ring.
Don't
import { Pill, TextLink } from "@hackcove/ui";

<TextLink href="#flakes">
  <Pill tone="amber" round>
    3 flaky
  </Pill>
</TextLink>
A Pill inside a TextLink is two parts doing one job, and the Pill's own hover dim and focus ring go unused. Give the Pill the href.

Usage

  • Choose tone by meaning: emerald for done or good, amber for waiting or at risk, red for failed, slate for neutral or draft; blue, sky and violet for kinds and categories.
  • dot adds a leading dot in the Pill's colour; round swaps the rounded-square corners for a full pill shape. Use one look across a view.
  • A Pill that goes somewhere takes href (or render for your router's Link, external for a new tab); one that does something takes onClick.
  • A Pill beside a card's title is the Card's status, not a hand-built row.
  • A message to read is a Callout, and an action is a Button.

Accessibility

  • A plain Pill is a <span>; the dot is aria-hidden. The tone is colour only, so the text must say the status itself.
  • With href it is a link and with onClick a <button type="button">; both dim on hover and show the focus ring.
  • external adds target="_blank" and rel="noreferrer".

API

Pill

A small tinted label; dot adds a leading dot in the pill's own text colour, round swaps the rounded-md corners for a full pill shape. href makes it a link (a plain <a>, or with render the app's own router <Link>: render={(p) => <Link to="/flakes" {...p} />}; external opens a new tab) and onClick makes it a button, each with a hover dim and the focus ring.

dot
Type
boolean
Default
false
external

Opens in a new tab: adds target="_blank" and rel="noreferrer".

Type
boolean
Default
false
href
Type
string
onClick

A Pill that is a button: runs onClick. Defaults to type="button".

Type
MouseEventHandler<HTMLButtonElement>
render
Type
LinkRender
round
Type
boolean
Default
false
tone
Type
"slate" | "amber" | "emerald" | "blue" | "red" | "violet" | "sky"
Default
slate