Status pill
Small non-interactive status label (also known as badge, status tag) with tone variants mapped to semantic status roles and an optional dot.
Experimental · Atom
Example
Open the standalone example. Static HTML rendered from the Default Storybook story, with generated tokens and the component's own CSS.
When to use
A row, card or record header needs a short status — published, draft, in validation, in research — next to its title.
Not for: Actions (button), filters, count badges on icons, or transient results (toast). Never rely on colour alone; the label carries the meaning.
Parameters
| Name | Type | Required | Default |
|---|---|---|---|
children | ReactNode | Yes | — |
tone | neutral | success | warning | info | draft | validation | No | "neutral" |
size | sm | md | No | "md" |
dot | boolean | No | false |
Variants
neutral, success, warning, info, draft, validation
Tokens and dependencies
Tokens: color-bg-muted, color-text-secondary, color-border, color-success-bg, color-success-text, color-success-border, color-warning-bg, color-warning-text, color-warning-border, color-info-bg, color-info-text, color-info-border, color-status-draft-text, color-status-draft-border, color-status-validation-bg, color-status-validation-text, color-status-validation-border, spacing-0, spacing-1, spacing-1-5, spacing-2, spacing-2-5, border-width, radius-full, font-primary, text-xs, weight-semibold, leading-snug.
Builds on: persona-card, toast.
Source
Canonical contract: components/status-pill/SPEC.md. React binding: components/status-pill/react/StatusPill.tsx. Css binding: components/status-pill/status-pill.css.