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

Tag

Overview Style Guidelines Code Demos Accessibility

Usage

Use a tag to highlight an element on a page to draw attention to it or make it more searchable.

Tag vs. badge

If you need to reflect counts like number of objects, events, or unread items, use a Badge instead.

Variants

Both variants come in red, orange, green, cyan, blue, purple, and gray colors. The white variants is for the dark theme only. A filled tag can be used to add more visual prominence whereas an unfilled tag can be used for grouping. You can use both variants in the same layout or user interface, just not in the same area or container. Whatever you choose, be sure to maintain consistency as best as possible.

Warning

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

A row of filled tags with text ‘Filled tags’ underneath and a row 
        of unfilled tags with text ‘Unfilled tags’ underneath

Icons

Add an icon when additional visual information is helpful or to distinguish tags of the same color.

Helpful tip

Add an icon when additional visual information is helpful or to distinguish tags of the same color.

A row of tags showing examples of optional icons

White tag

The unfilled white tag should be used in the dark theme or on dark backgrounds. It should also be used on its own and not be grouped. The text should not indicate a status, it should be written to be a descriptive caption to elements nearby.

A white tag used on top of two blocks of various text styles

Status

Color

Colors may be used to indicate status if desired. Regardless of what the text says, it is recommended not to use a red tag unless it is communicating a danger or error state.

Helpful tip

Filled tags may communicate a status or message more effectively than unfilled tags because they are more visually prominent.

A row of filled tags with examples of unique status text labels per each color

Text

The text you write can communicate a status as well, so choose a corresponding color that makes sense.

Two groups of two tags with examples of correct status text labels

Writing content

Text labels

Text labels should be written to add context or clarity using as few words as possible. If text needs to be longer, use a caption or another text style instead.

Two groups of two tags with examples of correct and incorrect text labels

The recommended maximum character count for the elements of a tag are listed below and include spaces.

Element Character count
Text label 20

Grouping

A tag can be used on its own or grouped in a row. When there are too many tags in one row, a new row will appear.

Two groups of two tags, one group is three tags in one row and the other group is two tags in one row and one tag in a second row

Best practices

Mixing variants

Do not mix variants or tags with and without icons in the same area or container.

Two rows of tags; the first row shows a mix of variants and the second row shows a mix of tags with and without icons, both are incorrect usage

Dark theme tags

Do not use light theme tags in the dark theme, contact us if you need dark theme tags.

Light theme tags used on a dark background which is incorrect usage

Custom tags

Do not make your own custom tags. If you need a custom set of tags designed, contact us.

Three tags with custom colors which is incorrect usage
© 2021-2024 Red Hat, Inc. Deploys by Netlify