Badges are small inline labels used to indicate status, category, or metadata. They use the brand display font () and pill shape by default.
Tokens
| Token | Default | Purpose |
|---|---|---|
| Font size | ||
| Vertical padding | ||
| Horizontal padding | ||
| Border radius (pill) |
Status variants reuse the global --status-* tokens.
Basic usage
Default
<span class="badge">Default</span>
Variants
Default
Success
Warning
Danger
Info
Accent
<span class="badge">Default</span>
<span class="badge badge--success">Success</span>
<span class="badge badge--warning">Warning</span>
<span class="badge badge--danger">Danger</span>
<span class="badge badge--info">Info</span>
<span class="badge badge--accent">Accent</span>
Each variant uses color-mix() to create a transparent tinted background from the corresponding --status-* token.
Accessibility notes
- Badges are presentational — they do not require ARIA roles
- Ensure the badge text provides sufficient context (avoid colour-only meaning)
- If a badge conveys critical status, pair it with descriptive text nearby
Do / Don't
Do:
- Use badges for metadata: status, version, category
- Keep badge text short (1-2 words)
Don't:
- Don't use badges as buttons — they are not interactive
- Don't rely on colour alone to convey meaning