Tag

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Variants
  3. Theme
  4. Space
  5. Interaction states
  1. Style
  2. Variants
  3. Theme
  4. Space
  5. Interaction states

Style

A tag is text on a pill-shaped background. It comes in a variety of colors, styles, and sizes. The text may be linked or include an optional decorative icon.

Anatomy

Image of 4 tags, 3 of which are annotated with anatomy features; annotation number 1 is pointing to the Text, annotation number 2 is pointing to the Decorative icon, and annotation number 3 is pointing to the Linked text of a Linked Tag
  1. Text
  2. Decorative icon
  3. Linked text

Variants

Style

There are three available tag styles: Filled, Outlined, and Desaturated.

Image of 3 tags, a filled variant with a red background and red border, an outlined variant with a white background and red border, and a desaturated variant with a white background and dark grey border

Color

There are nine available tag colors. The Desaturated style uses only one color for both the border and text.

Image of a collection of all the variations of tag, 9 filled, 9 outlined, and 9 desaturated

Size

There are two available tag sizes. Each style and color has Default and Compact sizes.

Image of a collection of all the variations of tag, 2 filled one normal sized and one compact, 2 outlined one normal sized and one compact and 2 desaturated one normal sized and one compact
Tag size Text size token
Default --rh-font-size-body-text-sm
Compact --rh-font-size-body-text-xs

Decorative icon

Each tag style, color, and size includes an optional decorative icon.

Helpful tip

Browse the UI Icons to see more options

 Image of a collection of the variations of tag, 2 filled one normal sized and one compact with a check mark icon, 2 outlined one normal sized and one compact with a check mark icon, and 2 desaturated one normal sized and one compact with a check mark icon

Interactivity

Each tag style, color, and size can be text only or linked.

Image of a collection tags, 3 rows of 4 pairs of icons each pair contains a tag that is normal size and compact. 2nd and 4th column contains a padlock icon. 3rd and 4th column contain links. First row are all filled, second row is outlined variants, and third row is desaturated.

Theme

Each tag style, color, and size is available in both light and dark themes.

Light theme

Image of a collection light theme variant tags. 6 rows of 9 tags in every variation, filled, outlined, desaturated, with alternating rows the compact size.

Dark theme

Image of a collection dark theme variant tags. 6 rows of 9 tags in every variation, filled, outlined, desaturated, with alternating rows the compact size.

Space

Tags have 8px of space in between each other in a row or when stacked.

Image of the tags with spacer blocks displayed as annotations

Interaction states

Only tags with linked text have interaction states.

Hover

The tag border changes to --rh-border-width-md or 2px on hover.

Image of a collection of tags, 4 rows, odd rows normal sized, even rows compact, all tags contain links showing hover state with with bigger border. First column of tag are filled, second are outlined and third are desaturated. Last two rows also contain timer icons.

Focus and Active

A focus ring wraps text or the icon and text in both focus and active states. The border also changes as seen in the hover state.

Image of a collection of tags, 4 rows, odd rows are normal sized, even rows are compact, all tags contain links. Each tag is displaying focus style with a focus outline and the bigger border included in the hover state. First column of tags are filled, second are outlined and third are desaturated. Last two rows also contain timer icons.
Edit this page on GitHub