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

Sample element


RedHat Orange Green Cyan Blue Purple Gray


RedHat Orange Green Cyan Blue Purple Gray


View a live version of this element and see how it can be customized.

<rh-tag color="red">Red <span class="visually-hidden">Hat</span></rh-tag>
<rh-tag color="orange">Orange</rh-tag>
<rh-tag color="green">Green</rh-tag>
<rh-tag color="cyan">Cyan</rh-tag>
<rh-tag color="blue">Blue</rh-tag>
<rh-tag color="purple">Purple</rh-tag>

<script type="module">
import '@rhds/elements/rh-tag/rh-tag.js';

View the <rh-tag> demo in a new tab

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
© 2021-2023 Red Hat, Inc. Deploys by Netlify