Components / Atoms

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

API#

Coming Soon