Badge
Compact status label for communicating states, categories, and counts.
Neutral
Variants
Five semantic tones communicate status. Match tone to meaning and keep usage consistent across the product.
| Variant | Purpose |
|---|---|
| Neutral | Default status — drafts, labels, and non-urgent metadata. |
| Info | Informational status — announcements, in-progress states. |
| Success | Positive status — in stock, completed, verified. |
| Warning | Caution — low stock, pending review, expiring soon. |
| Error | Critical status — failed, out of stock, blocked. |
Design tokens
| Token | Value | Description |
|---|---|---|
background/subtle | #f5f5f5 | Neutral subtle background |
border/default | #cccccc | Neutral subtle border |
text/secondary | #4f5052 | Neutral subtle text |
background/state/info/subtle | #ecf7ff | Info subtle background |
border/state/info | #00599d | Info subtle border |
text/state/info | #004275 | Info subtle text |
background/state/success/subtle | #eefff5 | Success subtle background |
border/state/success | #049442 | Success subtle border |
text/state/success | #049442 | Success subtle text |
background/state/warning/subtle | #fff6ee | Warning subtle background |
border/state/warning | #8c7314 | Warning subtle border |
text/state/warning | #774217 | Warning subtle text |
background/state/error/subtle | #ffeae7 | Error subtle background |
border/state/error | #bc1700 | Error subtle border |
text/state/error | #931200 | Error subtle text |
background/state/{tone}/bold | varies | Solid background per tone |
radius/sm | 4px | Corner radius |
stroke-weight | 1px | Subtle variant border |