Skip to main content Red Hat Design System logo Contribute on Github

Tag

Overview Style Guidelines Code Demos Accessibility

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 two available variants and the only difference is the background colors. Both variants include an optional slot for displaying a small icon to the left of the text label.

Tags with text describing each variant

Theme

Both variants are available in the light theme. There is an unfilled white tag available in the dark theme if necessary.

Light theme

Light theme tag examples

Dark theme

Dark theme tag examples

Configuration

Both variants have the same height and border radius.

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

Space

Light theme tag spacing within the element and when grouped Dark theme 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.

© 2021-2024 Red Hat, Inc. Deploys by Netlify