Tag

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

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>
<rh-tag>Gray</rh-tag>

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

• 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