Pill.
Small label that encodes semantic state. Five types map to intent (base / info / success / warning / danger) — use Pill for status ("Active", "Pending", "Failed", "Connected"). For categorical or decorative labels (DEBIT, 99+, NEW) use Badge.
When to use
Use Pill for WHAT CONDITION / status something is in — "Active" / "Frozen" / "Pending" / "Failed", "Approved" / "Rejected" / "In review", "Connected" / "Disconnected" / "Needs update". Types map to semantic intent: base (neutral, no signal), info (informational, brand-tinted), success (positive outcome), warning (attention required, not failing yet), danger (error, critical state). For categorical / decorative labels (tier markers, counts, "NEW") use Badge instead. Pill encodes condition with semantic color; Badge encodes category with visual style.
Badge vs Pill
Pill encodes WHAT CONDITION something is in (semantic state). Badge encodes WHAT something IS (category, visual style). The two components live side by side — pick based on meaning, not appearance.
| Pill | Badge | |
|---|---|---|
| Encodes | semantic state | category / decoration |
| Examples | Active Pending Failed Connected | DEBIT CORPORATE 99+ NEW |
| Variants | base · info · success · warning · danger (semantic) | default · brand · outline · secondary (visual) |
| Typography | sentence case, body sans | mono uppercase, tracked wider, code-style |
| Radius | rounded-sm (4px) | rounded-md (6px) |
See /components/badge for the counterpart.