Tag
On this page
On this page
Overview
A tag is a caption added to an element for better clarity and user convenience.
Edit element properties
import '@rhds/elements/rh-tag/rh-tag.js';<rh-tag>Tag</rh-tag>The icon to display in the label.
Icon set to display in the label
The variant of the label.
The variant of the label.
optional href for linked tag.
The color of the label. Note: 'cyan' will also work, but is deprecated
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
In Progress
When to use
- Categorize content
- Add context or clarity to elements
- Indicate status
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 checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component will be added to the RH Shared Libs repo when finished |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
