Badge
Badges are small inline labels used to indicate status, category, or metadata. They use the brand display font () with uppercase styling.
The class is required. Colour variants use the data-color attribute — the same API as button.
Anatomy
The badge uses data-color for semantic colour variants. No component-level tokens — badge references system tokens directly.
| Axis | Mechanism | Example |
|---|---|---|
| Colour | data-color |
data-color="success" |
Basic usage
Default
<span class="badge">Default</span>
Colour
data-color applies a semantic colour. The badge background uses the status background token and text uses the status foreground.
| Semantic | Brand alias | Use for |
|---|---|---|
data-color="danger" |
data-color="red" |
Errors, critical status |
data-color="success" |
data-color="green" |
Live, published, positive |
data-color="warning" |
data-color="yellow" |
Draft, pending, attention |
data-color="info" |
data-color="blue" |
Informational, neutral |
Default
Success
Warning
Danger
Info
<span class="badge">Default</span>
<span class="badge" data-color="success">Success</span>
<span class="badge" data-color="warning">Warning</span>
<span class="badge" data-color="danger">Danger</span>
<span class="badge" data-color="info">Info</span>
Accessibility
- 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
Usage rules
Do
- Use badges for metadata: status, version, category
- Keep badge text short (1-2 words)
- Use
data-colorfor meaning — not decoration
Don't
- Don't use badges as buttons — they are not interactive
- Don't rely on colour alone to convey meaning
CSS reference
This section documents how the component is built. For usage, see the sections above.
Styling
| Property | Value |
|---|---|
| Font family | |
| Font size | |
| Padding | var(--space-2xs) var(--space-s) |
| Border radius | 0 |
| Background | |
| Text colour |
Selectors
| Selector | Purpose |
|---|---|
| Base component | |
.badge[data-color="success"], .badge[data-color="green"] |
Success colour variant |
.badge[data-color="warning"], .badge[data-color="yellow"] |
Warning colour variant |
.badge[data-color="danger"], .badge[data-color="red"] |
Danger colour variant |
.badge[data-color="info"], .badge[data-color="blue"] |
Info colour variant |