Badge
A small, non-interactive marker showing a status or a count.
UI ComponentsA 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
You may ask
Frequently Asked Questions
What is the difference between a badge and a chip?
A badge is a passive marker showing a count or status. A chip is interactive — it can be selected, filtered by or removed. If the user can click it, it is a chip.
Should a badge show zero?
Usually not — hide it instead, so the badge's presence itself means there is something to see. Show zero only where the absence of the badge would be read as missing data rather than an empty count.
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.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us