Badge.
Small categorical or decorative label. Mono uppercase in a hairline-bordered or filled chip. Use Badge for category, count, or visual emphasis (DEBIT, 99+, AI, NEW). For semantic state (Active, Pending, Failed) use Pill.
When to use
Use Badge for WHAT something IS or HOW it is categorized — tier markers ("DEBIT", "CORPORATE"), count indicators ("3", "99+"), category tags ("Software", "Marketing"), visual emphasis on a known label ("Default", "AI", "New"). For semantic STATE (Active / Pending / Failed / Frozen) use Pill instead. Badge encodes category with visual style; Pill encodes condition with semantic color.
Badge vs Pill
Badge encodes WHAT something IS (category, visual style). Pill encodes WHAT CONDITION something is in (semantic state). The two components live side by side — pick based on meaning, not appearance.
| Badge | Pill | |
|---|---|---|
| Encodes | category / decoration | semantic state |
| Examples | DEBIT CORPORATE PARTNER LIMITED 99+ | Active Pending Failed Connected |
| Variants | default · brand · secondary · yellow · outline (visual emphasis ladder) | base · info · success · warning · danger (semantic) |
| Typography | mono uppercase, tracked wider, code-style | sentence case, body sans |
| Radius | rounded-md (6px) | rounded-sm (4px) |
See /components/pill for the counterpart.