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.

A row of tags, a tag with the content: Warning that has a filled yellow background and a brighter yellow border and a triangle warning sign icon, a tag with the content: Signed, with a white background and green border, a tag with the content: Red Hat Openshift with a blue background and brighter blue border, and a tag with the content: Critical Error with a white background and redborder and exclamation mark icon.

Status

What do these mean?
Figma library:
Ready
RH Elements:
Ready
RH Shared Libs:
In Progress

Sample element

Filled Outlined Desaturated

When to use

  • Categorize content
  • Add context or clarity to elements
  • 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 In Progress undefined
Edit this page on GitHub