Tag
Importing
Add rh-tag to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-tag/rh-tag.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-tag>Tag</rh-tag>
<script type="module">
import '@rhds/elements/rh-tag/rh-tag.js';
</script>rh-tag
A tag provides a short, pill-shaped label for categorizing content or
indicating status. It should include an icon when color alone conveys
meaning. Linked tags must have descriptive text for screen readers, and
should provide an aria-label on group containers. When disabled, Enter
keyboard navigation is suppressed on linked tags.
Theming
This element uses Red Hat design system theming and can be used in themable contexts.
Slots
| Slot Name | Summary | Description |
|---|---|---|
[default]
|
tag text content for screen readers and visual display |
Expects inline text. Text must convey meaning without
relying on color alone (WCAG 1.4.1). Keep under
25 characters. |
icon
|
decorative icon for screen reader and visual context |
Expects an |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
icon
|
icon |
The name of the icon to display in the tag.
When set, an |
|
|
icon-set
|
iconSet |
The icon set from which to select the icon. Defaults to |
|
|
variant
|
variant |
The visual style variant of the tag.
|
|
|
size
|
size |
The size of the tag. When set to |
|
|
href
|
href |
Optional URL that makes the tag a navigable link. When set, the tag renders an anchor element around its text content. |
|
|
disabled
|
disabled |
Whether an interactive (linked) tag is disabled. When true, the tag visually appears inactive and keyboard navigation is suppressed. |
|
|
color
|
color |
The color palette of the tag. Nine colors are available. Choose colors that correspond to the tag's semantic meaning (e.g. red for errors, green for success). Defaults to gray. Note: |
|
|
Methods
None
Events
None
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
icon
|
decorative icon for screen reader and visual context |
Expects an |
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-tag-padding-block-start |
Tag block-start padding Compact block-start padding |
0
|
--rh-tag-padding-inline-end |
Tag inline-end padding |
var(--rh-space-md, 8px)
|
--rh-tag-padding-block-end |
Tag block-end padding Compact block-end padding |
0
|
--rh-tag-padding-inline-start |
Tag inline-start padding |
var(--rh-space-md, 8px)
|
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-length-3xs
|
Offset between the link text and its dashed underline 2px length token |
|
--rh-color-surface-lighter
|
Tag pill background color, varies by color and variant Tertiary surface (light theme) |
|
--rh-font-family-body-text
|
Text font family Body text font family |
|
--rh-font-size-body-text-sm
|
Text size 14px font size |
|
--rh-font-weight-body-text-regular
|
Text weight Regular font weight |
|
--rh-line-height-body-text
|
Body text line height Line height for body text |
|
--rh-size-icon-01
|
16px icon box |
|
--rh-border-width-sm
|
Container border width 1px border width; Example: Secondary CTA or Button |
|
--rh-color-border-subtle
|
Container border color |
|
--rh-border-radius-pill
|
Pill-shaped border radius for the tag container Pill-shaped border radius matching the container Pill border radius; Example: Label |
|
--rh-border-radius-default
|
Focus ring border radius for the inner text area 3px border radius; Example: Card |
|
--rh-space-xs
|
Icon to text gap 4px spacer |
|
--rh-border-width-md
|
Thicker border on hover for visual feedback Focus ring outline width 2px border width: Example: Alert |
|
--rh-color-border-interactive
|
Focus ring outline color |
|
--rh-font-size-body-text-xs
|
Compact variant uses a smaller text size 12px font size |
|
--rh-space-md
|
Compact inline-end padding Compact inline-start padding 8px spacer |
|
--rh-color-red-50
|
Red tag border in dark mode Brand red (light and dark theme) |
|
--rh-color-red-70
|
Red tag fill in dark mode Red text in light mode Darker brand red |
|
--rh-color-red-10
|
Red tag fill in light mode Red text in dark mode |
|
--rh-color-red-20
|
Red outline icon in dark mode Lightest brand red |
|
--rh-color-red-60
|
Red icon in light mode Red outline icon in light mode Red outline text in light mode Dark brand red |
|
--rh-color-red-30
|
Red tag border in light mode Red icon in dark mode Red outline text in dark mode Lighter brand red |
|
--rh-color-red-orange-50
|
Red orange tag border in dark mode |
|
--rh-color-red-orange-70
|
Red orange tag fill in dark mode Red orange text in light mode |
|
--rh-color-red-orange-10
|
Red orange tag fill in light mode Red orange text in dark mode |
|
--rh-color-red-orange-20
|
Red orange outline icon in dark mode |
|
--rh-color-red-orange-60
|
Red orange icon in light mode Red orange outline icon in light mode Red orange outline text in light mode |
|
--rh-color-red-orange-30
|
Red orange tag border in light mode Red orange icon in dark mode Red orange outline text in dark mode |
|
--rh-color-orange-50
|
Orange tag border in dark mode Label - Filled (Orange) accent color |
|
--rh-color-orange-70
|
Orange tag fill in dark mode Orange text in light mode Label - Filled (Orange) text color |
|
--rh-color-orange-10
|
Orange tag fill in light mode Orange text in dark mode Label - Filled (Orange) background color |
|
--rh-color-orange-20
|
Orange outline icon in dark mode |
|
--rh-color-orange-60
|
Orange icon in light mode Orange outline icon in light mode Orange outline text in light mode |
|
--rh-color-orange-30
|
Orange tag border in light mode Orange icon in dark mode Orange outline text in dark mode Label - Filled (Orange) border color |
|
--rh-color-yellow-50
|
Yellow tag border in dark mode |
|
--rh-color-yellow-70
|
Yellow tag fill in dark mode Yellow text in light mode Alert - Warning title text |
|
--rh-color-yellow-10
|
Yellow tag fill in light mode Yellow text in dark mode Alert - Warning background |
|
--rh-color-yellow-20
|
Yellow outline icon in dark mode |
|
--rh-color-yellow-60
|
Yellow icon in light mode Yellow outline icon in light mode Yellow outline text in light mode |
|
--rh-color-yellow-30
|
Yellow tag border in light mode Yellow icon in dark mode Yellow outline text in dark mode |
|
--rh-color-green-50
|
Green tag border in dark mode |
|
--rh-color-green-70
|
Green tag fill in dark mode Green text in light mode Alert - Success title text |
|
--rh-color-green-10
|
Green tag fill in light mode Green text in dark mode Alert - success background |
|
--rh-color-green-20
|
Green outline icon in dark mode Label - Filled (Green) border color |
|
--rh-color-green-60
|
Green icon in light mode Green outline icon in light mode Green outline text in light mode Alert - Success accent |
|
--rh-color-green-30
|
Green tag border in light mode Green icon in dark mode Green outline text in dark mode |
|
--rh-color-teal-50
|
Teal tag border in dark mode Alert - Default accent |
|
--rh-color-teal-70
|
Teal tag fill in dark mode Teal text in light mode Alert - Default title text |
|
--rh-color-teal-10
|
Teal tag fill in light mode Teal text in dark mode Alert - Default background |
|
--rh-color-teal-20
|
Teal outline icon in dark mode |
|
--rh-color-teal-60
|
Teal icon in light mode Teal outline icon in light mode Teal outline text in light mode |
|
--rh-color-teal-30
|
Teal tag border in light mode Teal icon in dark mode Teal outline text in dark mode Label (Cyan) border color |
|
--rh-color-blue-50
|
Blue tag border in dark mode Label - Filled (Blue) accent color |
|
--rh-color-blue-70
|
Blue tag fill in dark mode Blue text in light mode Alert - Info title text |
|
--rh-color-blue-10
|
Blue tag fill in light mode Blue text in dark mode Alert - Info background |
|
--rh-color-blue-20
|
Blue outline icon in dark mode Label - Filled (Blue) border color |
|
--rh-color-blue-60
|
Blue icon in light mode Blue outline icon in light mode Blue outline text in light mode Inline link hover (light theme) |
|
--rh-color-blue-30
|
Blue tag border in light mode Blue icon in dark mode Blue outline text in dark mode Inline link (dark theme) |
|
--rh-color-purple-50
|
Purple tag border in dark mode |
|
--rh-color-purple-70
|
Purple tag fill in dark mode Purple text in light mode Inline link visited hover (light theme) |
|
--rh-color-purple-10
|
Purple tag fill in light mode Purple text in dark mode Label - Filled (Purple) background color |
|
--rh-color-purple-20
|
Purple outline icon in dark mode Inline link visited hover (dark theme) |
|
--rh-color-purple-60
|
Purple icon in light mode Purple outline icon in light mode Purple outline text in light mode Inline link visited (light theme) |
|
--rh-color-purple-30
|
Purple tag border in light mode Purple icon in dark mode Purple outline text in dark mode |
|
--rh-color-gray-10
|
Gray tag fill in light mode Gray text in dark mode Tertiary surface (light theme) |
|
--rh-color-gray-20
|
Gray outline icon in dark mode Secondary surface (light theme) |
|
--rh-color-white
|
Outline variant fill in light mode Lightest surface (light theme) or primary text (dark theme) |
|
--rh-color-gray-95
|
Outline variant fill in dark mode Primary surface (dark theme) or primary text (light theme) |
|
--rh-color-gray-50
|
Gray tag border in dark mode Outline variant border in dark mode Subtle icon |
|
--rh-color-text-primary
|
Desaturated border color Desaturated icon color Desaturated text color |
|
--rh-color-gray-30
|
Gray tag border in light mode Gray icon in dark mode Gray outline text in dark mode Outline variant border in light mode Disabled fill in light mode Disabled border in light mode Subtle borders (light theme) |
|
--rh-color-gray-70
|
Gray tag fill in dark mode Gray text in light mode Disabled fill in dark mode Disabled border in dark mode Tertiary surface (dark theme) |
|
--rh-color-gray-60
|
Gray icon in light mode Gray outline icon in light mode Gray outline text in light mode Disabled icon in light mode Disabled text in light mode Secondary text (light theme) |
|
--rh-color-gray-40
|
Disabled icon in dark mode Disabled text in dark mode Subtle icon (hover state) |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
