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 PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
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. 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.

Color scheme

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

Light scheme

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 scheme

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 width increases to --rh-border-width-md 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
© 2021-2025 Red Hat, Inc. Deploys by Netlify