Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Tag

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleVariantsColor schemeSpaceInteraction statesStyleVariantsColor schemeSpaceInteraction states

Style

A tag is text on a pill-shaped background. It comes in a variety of colors, styles, and sizes.

Anatomy

3 tags with annotated 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 gray border

Color

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

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.

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 our UI Icons to see what icons are available to use.

 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

Color scheme

Each tag style, color, and size is available for both light and dark color schemes.

Light scheme

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

Dark scheme

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.

Tags with spacer blocks displayed as annotations

Interaction states

Hover

Styles will change on hover depending on how a tag is used.

  • The dashed underline is the same color as the text it is applied to
  • If a tag has linked text, the underline will disappear on hover
  • A disabled tag has no states
A collection of six light scheme tags, two to each group. There are two variants: linked and disabled. The linked tag shows the underline disapearing on hover. The disabled tag has no hover state. The same arrangement as the previous image, but using a dark color scheme.

Focus and Active

A focus ring wraps around the text and icon in both focus and active states. Hover state styles remain the same.

A collection of four sets of two tags each. The right tag in each set has a blue focus ring denoting the focus state around the tag text and optional icon. Same setup as above, but on a dark scheme background.
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify