Badge
A small tinted label. Tone-aware; solid and outline variants when the tint is not enough.
Examples
Badges
Draft
Published
Review
Blocked
Scheduled
Solid
Outline
Live
Large
Anatomy
span.badge | Short text. May hold a leading .icon; the gap is set for you. |
API
| Attribute | Values | Description |
|---|---|---|
data-tone | accentsuccesswarningdangerinfo | Colours the tint, the text, the outline and the dot. Default accent. |
data-variant | solidoutline | solid fills with the tone; outline drops the fill for a thin ring. Default light tint. |
data-dot | boolean | Adds a small square in the tone before the text. |
data-size | l | Larger padding and type. Default extra small. |
Accessibility
- A badge is plain text. Its tone adds no meaning for screen readers, so the word itself must say the status ("Blocked", not a red blank).
- A count badge next to a control ("Inbox 3") is read as part of the surrounding text; label the control so the number makes sense, e.g. "3 unread".