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

<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>

Full screen demo

• 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