use UI

Tag

Also called chip, pill, label, token

A short label attached to an item, describing or classifying it.

Example

Descriptive — inert

Type-safe design tokens

  • typescript
  • design systems

These say what the article is about and nothing else. No focus ring, no hover, no tab stop — because there is nothing to press.

Filtering — interactive

Filter by topic

Each one is a button carrying aria-pressed, so “on” is announced rather than merely coloured. Focus stays on the tag after pressing, ready for the next one.

4 of 4 articles — no filter applied

  • Designing for slow networks
  • Type-safe design tokens
  • The cost of a spinner
  • Tokens without a build step

When to use it

  • An item belongs to categories that are worth showing but do not deserve their own column — topics, languages, skills.
  • The same vocabulary repeats across many items, so seeing it repeatedly builds a mental index.
  • Tags are how the collection gets filtered, and pressing one narrows the list.

When not to

  • The label reports a state rather than a category. “Failed”, “Draft” and “3 unread” are badges — one per item, not a set.
  • Every item has the same tags. A tag that is always there stops carrying information and just adds noise.
  • The text is a sentence. Tags are one or two words; longer than that and they wrap into unreadable blocks.

Trade-offs

  • Compact enough to show several classifications without a table.
  • Doubles as a filter affordance when the same vocabulary drives the list.
  • Reads as a set, so “what kind of thing is this” is answered in one glance.
  • Looks clickable whether or not it is — the pill shape promises an action the markup may not deliver.
  • Wraps unpredictably: a long tag list can take more vertical space than the content it describes.
  • Colour-coded tags run out of distinguishable colours faster than teams expect.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • An inert tag takes no focus at all. Putting `tabindex="0"` on decoration adds a stop that leads nowhere.
  • A filter tag is a real `<button>`: reachable by Tab, activated by Enter and Space.
  • A tag that navigates is an `<a>`, so it opens in a new tab with the modifier key like any other link.
Roles and state
  • A toggling filter tag needs `aria-pressed`. Without it, “on” is carried by background colour alone and does not survive high-contrast mode.
  • Group a set of tags in a `<ul>` so a screen reader announces how many there are before reading them.
  • The accessible name must stand alone: “TypeScript” is fine, “+3” is not — say “3 more tags”.
  • Never rely on tag colour to encode meaning. If red means blocked, the word has to say blocked.
Focus
Pressing a filter tag keeps focus on the tag. The results change below; moving focus into them steals control from someone who wants to press a second filter.

In the wild

  • GitHub topics — Topics are links to search; the language indicator beside them is inert text with a colour dot.
  • Stack Overflow — Tags on a question navigate to the tag page, and the tag list on the sidebar filters — both interactive, consistently.

Compared with

Side-by-side breakdowns of patterns that solve a similar problem.