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

Tag

Overview Style Guidelines Code Demos Accessibility

Overview

A tag is a caption added to an element for better clarity and user convenience.

Two rows of tags; the top row is ‘Filled’ tags and the bottom row is ‘Unfilled’ tags; from left to right, both rows of tags include red, orange, green, cyan, blue, purple, and gray colors

Status

What do these mean?
Figma library:
Ready
RH Elements:
Ready
WebRH:
Ready

Sample element

Filled

Red Orange Green Cyan Blue Purple Gray

Unfilled

Red Orange Green Cyan Blue Purple Gray

When to use

  • When you want to highlight an element on a page to draw attention to it or make it more searchable
  • When you need to tag items of the same category
  • When you need to indicate status

Status checklist

Property Status Meaning
Figma library Ready Component is available in the Figma library
RH Elements Ready Component is available in the RH Elements repo
WebRH Ready Component is available in the WebRH repo
© 2021-2024 Red Hat, Inc. Deploys by Netlify