Tag

Overview Style Guidelines Code Demos Accessibility
  1. Overview
  2. Status
  3. Sample element
  4. When to use
  1. Overview
  2. Status
  3. Sample element
  4. When to use

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
RH Shared Libs:
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
RH Shared Libs Ready Component is available in the RH Shared Libs repo
Edit this page on GitHub