Skip to content
UX Atlas
Plate CMP·023 · ComponentGrid F1 · Rev. 2026-08-14

Badge and Tag

A small marker of status, category or count, which must not look like something you can press.

ComponentCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2Rules
  3. 3Three things that look alike
  4. 4In practice
  5. 5Local chart
  6. 6Continue from here

Reach for this when

  • Marking status or category.
  • Showing counts.
  • Displaying active filters.

Common mistakes

  • Badges styled as buttons.
  • Colour-only status.
  • Unbounded counters.
  • Remove controls with no accessible name.

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.

Three things that look alike

Badge, counter and chip share a shape and behave differently. Styling them identically is the root of most confusion around this component.

TypeInteractiveCarries
Status badgeNoA state, with text as well as colour
Category tagSometimes, as a filter linkA label from a defined set
CounterNo, but often inside a controlA quantity, with an overflow rule
Filter chipYes, removableA value the reader applied, with a labelled remove control
Choice chipYes, selectableA toggleable option, which is really a checkbox or radio

In practice

  1. i.

    The status that was only a colour

    Accessibility and localisation

    An amber dot meaning pending was unreadable to anyone who could not distinguish it from the green one, and untranslatable. Adding the word cost six pixels and removed both problems.

  2. ii.

    99+ and what it hides

    Counter overflow

    A capped counter tells you there are many and nothing more. Where the exact number affects the decision, such as unread invoices, the cap has to be higher or the number needs a different home.

Local chart

CMP·023 · Region III · Grid F1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Von Restorff EffectLAW·009 · PRINCIPLES BEHIND THISAffordances and SignifiersPRIN·007 · PRINCIPLES BEHIND THISSemantic ColorFND·023 · PRINCIPLES BEHIND THISSimilarityFND·005 · PRINCIPLES BEHIND THISUse of ColorA11Y·010 · DEPENDS ONFilteringPAT·004 · OFTEN USED WITHNotificationsPAT·015 · OFTEN USED WITH

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

A DashboardA Data TableA Pricing PageA Search ExperienceAn AI ProductAn Ecommerce ExperienceAn Enterprise Workflow

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.