Badge
A short label for a state, a category or a count, coloured by meaning and always readable without the colour.
Tier 1 · CSS only
Text label
preview
Example
SuccessWarningErrorInfo
NeutralAccentOutline128
Show the markup
<div class="demo-stack">
<div class="demo-row"><span class="kit-badge" data-tone="good"><span class="kit-dot"></span>Success</span><span class="kit-badge" data-tone="warn"><span class="kit-dot"></span>Warning</span><span class="kit-badge" data-tone="bad"><span class="kit-dot"></span>Error</span><span class="kit-badge" data-tone="info"><span class="kit-dot"></span>Info</span></div>
<div class="demo-row"><span class="kit-badge">Neutral</span><span class="kit-badge" data-tone="accent">Accent</span><span class="kit-badge" data-variant="outline">Outline</span><span class="kit-badge" data-numeric>128</span></div>
</div>
Usage
<span class="kit-badge" data-tone="good"><span class="kit-dot"></span>Paid</span>
| Attribute |
Values |
Default |
data-tone |
neutral, accent, good, warn, bad, info |
neutral |
data-variant |
outline |
filled |
data-numeric |
present for counts, so digits line up |
absent |
Keep badges to a word or two. Reserve good, warn and bad for meaning, and use accent for "new" or a category.
Accessibility
- The words carry the meaning: "Overdue", not a red dot on its own. The dot is decoration.
- A badge beside something else ("Invoices 3") is read as part of it. If the number needs explaining, add hidden text: visually hidden text.
- Text meets WCAG AA contrast on every tone's background, in light and dark.