Tag

Removable categorization labels for filtering and organization. Supports sizes, icon/avatar prefix, keyboard navigation, and overflow handling.

Design Engineering Product

Open Tag Playground

Open in Figma

Anatomy

1 2 Label
  1. 1 Container — pill-shaped background
  2. 2 Text + optional remove button

Options

Sizes

Medium
md (default)
Small
sm

Removable

Label
Default
Label
Removable
Label
Selected

With icon prefix

Starred
Start icon
Starred
Icon + removable

Table of options

PropertyValuesDefault
texttext—
sizemd / smmd
removabletrue / falsefalse
removeLabeltextRemove
selectedtrue / falsefalse
startIconicon name / nonenone

Behaviors

Design Engineering Product Research

TagGroup wrapping

Tags inside a group wrap to multiple lines by default. Use no-wrap to clip overflow instead.

Removable

Remove action

The remove button dispatches a uif-tag-remove event. The host application is responsible for removing the tag from the DOM.

Usage guidelines

Removable vs non-removable

Filter: Active

Do

Use removable tags for applied filters or selections the user can dismiss.

Status

Don't

Don't add remove buttons to tags that represent read-only categories or status — use Badge instead.

Content standards

  • Keep labels concise (1–3 words). Use sentence case.
  • Use descriptive remove-label values when the tag text alone is not self-evident (e.g., "Remove Design filter").

Keyboard interactions

Key Behavior
Tab Moves focus to the remove button inside a removable tag
Enter / Space Activates the remove button
ArrowLeft / ArrowRight Moves focus between tags inside a uif-tag-group

Accessibility

  • The remove button carries an explicit aria-label for screen readers.
  • Icons inside tags are decorative (aria-hidden="true").
  • The TagGroup uses role="group" to communicate the relationship between tags.
  • Selected state is communicated via aria-selected="true".

Theming

Tag adapts across brands and modes through semantic tokens. Use the hero switches above.

For the full theming architecture see Foundations: Theming.

Design checklist

✓
All brand/mode contextsWorks across light and dark modes.
✓
Accessible use of colorColor is not the only means of conveying state (WCAG 1.4.1).
✓
Accessible contrastText and background meet requirements.
✓
Defined optionsSize, removable, selected, icon documented.
✓
Keyboard navigationArrow key navigation and remove action documented.
✓
Design tokensAll visual attributes as tokens.