Components
Badges
Small pill labels for status and counts. A badge annotates something else on the screen — it is never a control, and it never carries meaning on colour alone.
Variants
<span class="tmt-badge">Neutral</span>
<span class="tmt-badge tmt-badge--solid">Solid</span>
<span class="tmt-badge tmt-badge--outline">Outline</span>
<span class="tmt-badge tmt-badge--success">Online</span>
<span class="tmt-badge tmt-badge--warning">Low battery</span>
<span class="tmt-badge tmt-badge--error">Offline</span>
<span class="tmt-badge tmt-badge--info">Updating</span>Neutral is the default and the right choice most of the time. Reach for a status variant only when the state genuinely maps to success, warning, error or information — a badge that is green because green looks nice teaches people to ignore green.
Status dots
A dot adds a second visual signal. It is decoration, not information — the word beside it is what carries the meaning, which is what keeps the badge readable in greyscale.
<span class="tmt-badge tmt-badge--success">
<span class="tmt-badge__dot"></span>Online
</span>Counts
A count badge sits on a navigation item or a button. The number alone means nothing out of context, so pair it with visually hidden text that says what is being counted.
<button class="tmt-btn tmt-btn--secondary tmt-btn--sm">
Notifications
<span class="tmt-badge tmt-badge--count tmt-badge--solid">3</span>
<span class="tmt-visually-hidden">3 unread</span>
</button>Cap large numbers at "99+" so the pill does not stretch the control it sits on, and put the true figure in the hidden text. Hide the badge entirely at zero rather than showing a "0".
Counts use tabular figures, so a badge does not change width as the number ticks between 11 and 12.
In context
Front door lock
LockedLast changed 14:20 by Yaman
Badges also appear in table cells — see Tables — and beside navigation items. Wherever they go, they annotate the thing next to them and are never the thing itself.
Badges, chips and buttons
All three are pill-shaped in this system, which makes it easy to reach for the wrong one.
| If it… | Use |
|---|---|
| Describes something else on screen and is not clickable | A badge |
| Can be pressed to do something | A button — Buttons |
| Can be removed, or filters a list | A button. The system has no chip component yet; use .tmt-btn--secondary.tmt-btn--sm. |
| Is a page-level message | An alert — Alerts |
A badge is a <span>. If you find yourself adding a
click handler to one, it should have been a button.
Do and don't
Do
- Use one or two words.
- Keep the same label for the same state everywhere in the product.
- Add hidden text to any badge whose meaning depends on what it sits next to.
- Default to neutral.
Don't
- Put a sentence in a badge.
- Use a bare coloured dot as a status.
- Line up five badges on one row — that is a table of attributes.
- Make a badge clickable.