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. Case is customized through data-case or the component tokens — never by overriding the class.
Anatomy
The badge uses data-* attributes for variation and exposes two component tokens for contextual tuning.
| Axis | Mechanism | Example |
|---|---|---|
| Colour | data-color |
data-color="success" |
| Case | data-case or / |
data-case="none" |
Basic usage
<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 |
<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>
Case
Badges are uppercase with wide tracking by default. data-case="none" keeps the author's casing and resets the tracking — for badges carrying proper nouns, version strings, or sentence-case labels.
<span class="badge">Default</span>
<span class="badge" data-case="none">v1.3.1-beta</span>
For a contextual override across a whole surface, set the component tokens instead of restyling the class:
.release-notes .badge {
--badge-case: none;
--badge-tracking: normal;
}
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.
Component tokens
| Token | Default | Purpose |
|---|---|---|
uppercase |
Text transform | |
| Letter spacing |
Styling
| Property | Value |
|---|---|
| Font family | |
| Font size | |
| Text transform | |
| Letter spacing | |
| Padding | var(--space-2xs) var(--space-s) |
| Border radius | 0 |
| Background | |
| Text colour |
Selectors
| Selector | Purpose |
|---|---|
| Base component | |
.badge[data-case="none"] |
Sentence-case variant |
.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 |