Badge
Also called chip, pill, label, status tag, counter
A small inline label showing status, category, or a count, attached to another element.
Example
Status, three channels agreeing
- Published
- Draft
- Needs review
- Failed
Word, icon and colour all say the same thing. Any one of them can be missed and the badge still works.
Counts say what they count
Inbox3Alerts99+
A bare “3” announces as “three” and means nothing on its own, so the label spells it out. The cap is applied to the number itself — a layout that breaks at 12,480 is a layout that depends on luck.
The same information, colour only
Four dots. There is nothing here for a screen reader to read, nothing to search for, and for a red-green colour blind reader the first and last are the same dot. This row is the anti-pattern, not a variant.
When to use it
- A row has a state worth scanning for: draft, published, failed, overdue.
- A count matters at a glance — unread messages, open issues, items in a cart.
- Items belong to categories and the category helps someone filter visually.
When not to
- The label is the primary content. A badge is an annotation on something else, not the something else.
- Everything gets one. When every row carries three badges, none of them is scannable any more.
- It needs to be clicked. A badge is a label; if it filters or removes something it is a chip or a button, and should look and behave like one.
Trade-offs
- Reads in a fraction of a second once the vocabulary is learned.
- Costs almost no space, so it survives dense tables and narrow cards.
- Groups visually: five red badges in a column show a pattern a paragraph would not.
- Colour is the first thing people use to carry the meaning, and it is the one channel some users do not receive.
- Vocabulary creep — teams add states until nobody remembers what amber means.
- A count badge with no upper bound breaks the layout the day someone has 12,480 notifications.
Accessibility
What this pattern needs in order to work for everyone.
- Keyboard
- A badge is not interactive and must not be focusable.
- If it can be dismissed or toggles a filter, it stops being a badge — give it a real button with its own accessible name.
- Roles and state
- The text inside is the meaning. Never rely on colour alone: “Failed” in red is fine, a red dot on its own is not.
- A count that annotates something else needs to say what it counts: `aria-label="3 unread messages"` rather than a bare “3”.
- Live counts belong in a polite live region only if the change matters while the user is elsewhere on the page; otherwise the announcement is noise.
- Focus
- None — a badge never takes focus. If yours does, it is a control wearing a badge's clothes.
In the wild
- GitHub — Issue and PR state badges pair a colour with a word and an icon, so all three channels agree.
- Gmail — Unread counts capped at 99+, with the label spelled out for screen readers.