Tag

Overview Style Guidelines Code Demos Accessibility
  1. Style
  2. Theming
  3. Configuration
  4. Space
  5. Interaction states
  1. Style
  2. Theming
  3. Configuration
  4. Space
  5. Interaction states

Style

A tag is colored text on a pill background which may include an optional icon. A tag background can be colored, white, or transparent and it always includes a border.

Anatomy

Anatomy of a tag with annotations; number 1 is pointing to the container, number 2 is pointing to the text label, and number 3 is pointing to an optional icon
  1. Container and border
  2. Text label
  3. Optional icon

Variants

There are three available variants, which affect the background and colors. Both variants include an optional slot for displaying a small icon to the left of the text label.

Filled Outline Desaturated Filled Outline Desaturated

Theming

Both variants are available on the light and dark backgrounds.

Light Backgrounds

Red Red Orange Orange Yellow Green Teal Blue Purple Gray
Red Red Orange Orange Yellow Green Teal Blue Purple Gray

Dark Backgrounds

Red Red Orange Orange Yellow Green Teal Blue Purple Gray
Red Red Orange Orange Yellow Green Teal Blue Purple Gray

Configuration

Both variants have the same height and border radius.

How a tag is constructed showing border radius, icon, and height details

Space

Light background tag spacing within the element and when grouped Dark background tag spacing within the element
Example Token Description
4 --rh-space-xs 4px spacer
8 --rh-space-md 8px spacer

Interaction states

A tag includes only text and an optional icon and is not interactive right now.