Theme
Status pill
A small pill above a hero's heading that says where something stands, such as "Closed testing", and can lead on: "Request access". The dot repeats the status in colour, with a still halo; nothing pulses.
Examples
Closed testing
Open source
In training
Paused
Withdrawn
Props
StatusPill
A small pill above a hero's heading that says where something stands, such as the platform's closed testing, and can lead to more.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | The status in words, such as "Closed testing". Always shown: the dot is colour only. |
status? | Status | "active" | The status the dot shows. |
href? | string | — | Where the pill leads. Without it the pill is plain text. |
children? | ReactNode | — | What following the link does, such as "Request access", after a rule and before an arrow. |
linkAs? | ElementType | "a" | The component that renders the anchor, for a framework's client-side link (Next.js's `Link`, say). The system itself knows no router. |
Keyboard
| Key | Does |
|---|---|
| Enter | Follows the link, when the pill has one |
Accessibility
- The status is always in words; the dot is hidden from screen readers.
- With a link, the whole pill is one anchor named by its words, status first; the arrow is hidden.
- Hover snaps on and fades out with the motion tokens, which are zero under prefers-reduced-motion.