Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Tag

Overview Style Guidelines Code Demos Accessibility
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. Interaction states
  1. Style
  2. Theme
  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 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