UI Component Lab 日本語

← All components

Data display

Tag

A short keyword label used to categorize content or show an applied filter.

  • Red
  • Size M
  • Under $50

Also known as

How to recognize it

A small pill-shaped label with a short word. Removable tags have a small “×” at the end.

Variations

Selectable tag
Can be turned on or off, often to filter content on the page.

Behavior

  • Read-only tags only label content; removable tags can be dismissed, for example to clear a filter.
  • Each “×” is a button named after its tag, such as “Remove Red”.
  • After removing a tag, this demo moves focus to the next tag’s button so keyboard users do not lose their place.

Keyboard

KeyAction
TabMoves between the remove buttons.
Enter / SpaceRemoves the tag and moves focus to the next one.

Usage notes

  • A removable chip shows a value the user chose or entered. Do not use it for removals that cannot be undone.
  • A display-only chip shows a status or category. Do not tell them apart by color alone.
  • Badge: A tag stands on its own as a label for content; a badge is attached to another element to show a count or status.

Sources