display contract
Badge
Small status pill — for state on a card, list row, or inline tag.
Variants
- default
- Neutral fill.tertiary background
- primary
- semantic.primary tint at 12% alpha
- success
- semantic.success
- warning
- semantic.warning
- destructive
- semantic.destructive
- outline
- 1px hairline border + transparent fill
Sizes
- sm
- 20pt height, caption2
- md
- 24pt height, caption1 (default)
- lg
- 28pt height, footnote
Example
<Badge variant="success">Active</Badge>Usage rule
Badge label is uppercase with 0.5px tracking when ≤ 12 chars; sentence case otherwise.
The full Badge contract has 3 more rules and 1 more example, plus the do-not patterns. Get the full recipe.