Tag
An inline element for items that need to be labeled, categorized, or organized using keywords that describe them
A tag (sometimes called a "chip" or "label") is a helpful element for representing categorical data. For example, you might use a tag to list features or to display tags.
Default#
Default
Pill#
Pill
Clearable#
* Note: When hovering over the clear button, styling is applied to warn the user that they are about to do something critical. It is important to know that this styling is ineffective on the normal/critical variation.
Clearable
Clearable Pill
Maximum Width#
To keep tags at a reasonable size, there is a maximum width of 192px applied to tags.
Truncated tag of an unreasonable character length
Tones & Variants#
Primary
Subtle
Normal
Secondary
Subtle
Normal
Tertiary
Subtle
Normal
Quaternary
Subtle
Normal
Neutral
Subtle
Normal
Info
Subtle
Normal
Positive
Subtle
Normal
Warning
Subtle
Normal
Critical
Subtle
Normal