Badge
A small, non-interactive marker showing a status or a count.
A badge labels the thing it sits on: a count of unread items, a plan tier, a state. It is not interactive. That is the line between a badge and a chip, which the user can act on or remove. Making badges clickable produces an interface where nothing signals what is pressable.
Counts need rules before they need styling: a cap (“99+”), a decision about whether zero renders at all, and a clear meaning — unread, total, or new since last visit are three different numbers that look identical. Badges also need to be announced; a red circle beside an icon is invisible to screen-reader users unless the count is in accessible text.
In practice
A messaging product badged conversations with total message count rather than unread count. Users read a 340-message thread as 340 unresolved items and stopped trusting the number. Switching to unread-only, capped at 99+, restored its usefulness — no visual change beyond the digits.
Where teams get it wrong
- Clickable badges, which blur what is interactive.
- Uncapped counts that break the layout at four digits.
- Ambiguous counts — unread, total and new look the same.
- Badges announced to nobody, existing only as a coloured shape.
- Badge colours that do not match the status vocabulary used elsewhere.
( Learn more )
Related terms
All terms- Chip (UI)A compact interactive element representing an input, filter, selection or attribute — small, often removable, usually appearing in groups.
- Status IndicatorA persistent signal of a system or record's current condition — distinct from a message about something that just happened.
- AvatarA small image or initials standing for a person or organisation, used to make ownership and presence scannable.
- NavbarThe persistent top bar carrying a product's primary destinations, identity and account controls.