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


Overview Style Guidelines Code Accessibility


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 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


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


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


Both variants have the same height and border radius.

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


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