Tags represent keywords, categories, or other labels that serve to classify adjacent content.


The tag component is made up of four elements.

  1. Container
  2. Icon
  3. Label
  4. Dismiss button



The label conveys what the tag represents. Tags should always have a label present.

A tag with a label


An icon can be inserted to the left of the label to visually compliment the label. Tags should never be used with just an icon.

A tag with an icon preceding the label


Tags can be dismissed such as when using them within filters or search refinements. The dismiss button has its own set of interactions and states so it can be interacted with independent of the tag itself. The dismiss icon may be customized as needed.

A series of tags with the dismiss button in its various states


Tags come in two different sizes to accommodate various placements.


Small tags are the default and can be used in a variety of contexts and space constraints.

A small-sized tag


Medium tags are slightly more generous in height. These are best reserved for areas of the UI that include ample whitespace and fewer overall tags within a group.

A medium-sized tag



Interactive tags have a variety of states built in. Tags can be made interactive by setting a URL in the href property. Alternatively, a tabindex may be added to the tag. Since interactive tags are primarily intended to link to other pages, there is no disabled state available.

A tag in its enabled state
A tag in its focused state
A tag in its hover state
A tag in its active state


Tags have a default maximum width of 200px. Label text that overflows the container is truncated with an ellipsis once it reaches the maximum width. A tooltip displays the full text when a user hovers over the label. The maximum width may be adjusted via component token as needed.

A tag with a truncated label and another instance of the same tag with a tooltip displayed above the label

Component tokens

The following component tokens are available for customizing the tag component.

Sample references including the swatch and computed values currently represent the applied light theme.

The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.