ComponentCraft conventionFoundational
Badge and Tag
A small marker of status, category or count, which must not look like something you can press.
Definition
Badges label status or category; counters show a quantity; chips are removable filter tokens and are interactive. The three are visually similar and behave differently, which is a frequent source of confusion.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
Rules
- Non-interactive badges must look distinctly different from buttons and chips, or users will click them.
- Status conveyed by colour needs text as well, for accessibility and for localisation.
- Counters need a defined overflow rule, such as 99+, and an accessible label stating what is being counted.
- Removable chips need a labelled remove control that is reachable by keyboard, not a bare icon.
- Keep the set of statuses small and defined centrally, or teams will invent overlapping ones.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Von Restorff EffectLaw
- Affordances and SignifiersPrinciple
- Semantic ColorUI foundation
- SimilarityUI foundation
Often used with
These usually appear in the same screen or the same decision.
- FilteringPattern
- NotificationsPattern