Tag

A small element for categorising or filtering content — often dismissible or clickable. Three independent capabilities: selectable (a toggle chip), removable (a trailing ×), or a plain static label.

Install

Examples

Selectable

selectable makes a toggle chip — click or Enter/Space flips selected and emits change.

Text Text Text Text

Leading content

Add a leading-icon or an avatar (the avatar wins if both are set).

Text Jane Doe

Removable

removable adds a × that emits remove (Delete/Backspace on a focused tag also removes it). Handle remove to drop the tag — here the chips remove themselves.

Text Design

Filter group

All Active Archived Draft

Guidelines

Usage

category labels, filter chips, and removable selections. Add a leading-icon or avatar before the label. For a status label, use a Badge.

Do

  • Use selectable tags for filters and removable for chosen values.
  • Keep labels short — a word or two.
  • Handle the remove event to actually drop the tag from your data.

Don’t

  • Don’t use a plain tag where a labelled Badge or Status Indicator fits better.
  • Don’t make a tag both selectable and removable if the interactions compete confusingly.
  • Don’t rely on colour alone for a selected filter — the fill plus state should read clearly.

Accessibility

Properties

Related