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
General guidelinesStatusWriting contentInteractivityResponsive designBest practicesGeneral guidelinesStatusWriting contentInteractivityResponsive designBest practices

General guidelines

In general, use a tag to draw attention to an element on the page or make it more searchable.

Tag vs. badge

Although these elements look very similar, the following guidance should help clarify when to use each.

Element Use cases
Tag
  • Can be used on its own
  • Highlight an element on a page in order to draw attention to it
  • Make it more searchable
Badge
  • Reflect counts like number of objects, events, or unread items
Chip
  • Almost the same as a checkbox
  • Required to use more than once in a Chip group
  • Filter information on a page, categorize content, or indicate that a selection was made

Desaturated style

Use a desaturated tag to reduce visual prominence or to better fit a specific theme or visual style.

A desaturated tag in the upper right of an rh-card component on a dark color scheme.

Default vs. Compact sizes

When you need to use a tag, use the Default size first. If there are space limitations and using a tag is required, use the Compact size instead.

Tag groups

Tags can be grouped next to an element or in the same space. Tag groups can be used almost anywhere and are oriented either horizontally or vertically. Tags that are grouped should use the same style, but show different colors. Text-only tags and link tags may be used in the same group.

Helpful tip

There is no set order of color, but try putting the most important information first. Using a decorative icon in every tag in a group is optional.

 Two rows of four tags each. The first row has filled tags and the second outlined. From left to right, the tags are: text only, link, and disabled.

Status

Color

Certain colors may indicate a status. Be careful about how tags are used to communicate something. For example, in general, green is considered positive and red is considered negative. This is not the rule in every single situation.

To learn more about color as a status, go to the Color section.

Warning

Relying on color alone to communicate information causes barriers to access for many users. Learn more in the accessibility section.

 Two rows of tags each representing representing a state:, Failure, Error, Caution, Warning, Success, General, Informative, Helpful, Neutral. The tags in the first row are filled and in the second outline variants.

Text

If text is descriptive or generic enough, most colors can be used. However, do not use red or red orange, those colors are always reserved for failure or error states.

A row of tags each with the following text, Important, Documentation, Job template, Managed Service, Red Hat OpenShift, Security, Certified. Each tag is aligned with proper state colors.

If text communicates a status, choose a color that corresponds with that status.

A row of tags each with the following text, Trial has expired in red, Deprecated in orange-red, Trial expiring soon in yellow, Trial has started in green.

Icons

Include an icon where additional visual information is helpful and ensure that it makes sense when paired with text. Use filled icons for Filled style tags and line icons for Outlined and Desaturated style tags. If a filled icon does not exist in the library, it is acceptable to use the line version.

A row of three sets of tags. The first set has background colors and icons. The second set is outlined with icons. The third set are three desaturated tags with icons.

Writing content

Text in tags should add clarity or context using as few words as possible. If text needs to be longer, add text somewhere else or use another element instead.

An image of two rows of tags, representing short usage of words, The first row is incorrect examples which include trial started successfully, this process is secure, 147 critical tickets, your course is in progress. The second row includes correct examples include: success, secure, critical, In progress

Character count

Element Character count
Text 25

Interactivity

You can use a tag as a link. To use a tag in a button for actions like triggering a Popover, read about our tag pattern.

To see tag interaction states, go to the Style page.

The linked tag example shows the underline disappearing on hover.

Responsive design

Tags in one row will break to two or more rows as viewport sizes get smaller.

An image displaying the correct collapsing of a collection of tags on different width viewports.

Best practices

Mixing variants

3 filled tags, red, green, and gray.

Use any tag style, but use them consistently.

 Three tags with different styles (outlined, filled, and desaturated).

Do not mix tag styles in the same area.

Mixing sizes

Two rows of tags. The first row is normal size, the second row is compact size.

Use any tag size, but use them consistently.

 A row of tags, the first tag is compact, the second is normal size and the third is compact.

Do not mix tag sizes in the same area.

Using icons

A row of 4 tags with the text: error, warning, success, and action. Error has a red exclamation circle icon. Warning has a triangular icon with an exclamation point. Sucess has a green checkmark in a circle. Action has a diamond with a plus inside.

Use decorative icons, but ensure that each makes sense when paired with text.

 A row of four tags: error, warning, success, and action. The error tag has a checkmark icon. The warning tag has a phone icon. The success tag has a home icon. The action tag has a question mark icon.

Do not use decorative icons that cause confusion or take away from the meaning of text.
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify