Badge & pill
A small, non-clickable label. Used for status, counts, and category tags. If you can click it, it's a chip — not a badge.
Seven tones
Each tone has a soft background + saturated foreground. The neutral and outline variants stay quiet.
Neutral
Info
Success
Warn
Danger
Brand
Outline
In use
Real labels from real screens.
Cleared
Watch
In arrears
Shift S-2841
Beta
Form 4 Faraday
Day pupil
Counter badges
A small mono number, used in sidebars and tab bars.
Anatomy
| Property | Value | Notes |
|---|---|---|
| height | 22 px | — |
| padding | 0 8 px | — |
| radius | 9999 px | Always pill |
| font | 500 11 / 1 sans | Mono for counters |
| bg / fg | Tonal pair | See tokens.css for each tone |
Do & don't
Do
Use the canonical status labels: Active · Watch · In arrears · Cleared · Idle.
Don't
Make a badge clickable. Use a chip if the user needs to filter on it.
Do
Keep badges short — one or two words. They are labels, not sentences.
Don't
Use more than two badges on the same row. The eye stops reading after the second.
Code
<span class="badge badge-success">Cleared</span> <span class="badge badge-warn">Watch</span>