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. |
|
|
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 Applies a 1px border width to at least 1 side of a container. This shall be the default width for all borders and lines. It should be used to establish baseline thickness or visual separation with a container or thin line. It must not be used for strong directional emphasis like indicating a selected state. Recommended for elements like Button, Card, or Field. Applying to all 4 sides at once is optional. |
|
--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 Applies a 64px border radius to at least 1 corner of a container. It should be used for elements needing a circle or pill-shaped background like Avatar, Badge, or Switch. It may also be used for Hybrid style branding. Applying to all 4 corners at once is optional. It may replace the default 3px radius when not all corners need the same value. |
|
--rh-border-radius-default
|
Focus ring border radius for the inner text area Applies a 3px border radius to at least 1 corner of a container. This shall be the default for all containers needing rounded corners. It should be used to soften a container's visual footprint. Recommended for elements with subtle rounded corners like Button, Card, or Dialog. It must be applied to all 4 corners of a container at once. |
|
--rh-space-xs
|
Icon to text gap 4px spacer |
|
--rh-border-width-md
|
Thicker border on hover for visual feedback Focus ring outline width Applies a 2px border width to at least 1 side of a container. It should be used to add emphasis or visual separation beyond a 1px border. Recommended for elements needing extra thickness like Alert or Progress stepper. It must be used to ensure hover, focus, and active states are discernible by more than color alone per WCAG. Applying to all 4 sides at once is optional. |
|
--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 for dark scheme Brand red (light and dark theme) |
|
--rh-color-red-70
|
Red tag fill for dark scheme Red text for light scheme Darker brand red |
|
--rh-color-red-10
|
Red tag fill for light scheme Red text for dark scheme |
|
--rh-color-red-20
|
Red outline icon for dark scheme Lightest brand red |
|
--rh-color-red-60
|
Red icon for light scheme Red outline icon for light scheme Red outline text for light scheme Dark brand red |
|
--rh-color-red-30
|
Red tag border for light scheme Red icon for dark scheme Red outline text for dark scheme Lighter brand red |
|
--rh-color-red-orange-50
|
Red orange tag border for dark scheme |
|
--rh-color-red-orange-70
|
Red orange tag fill for dark scheme Red orange text for light scheme |
|
--rh-color-red-orange-10
|
Red orange tag fill for light scheme Red orange text for dark scheme |
|
--rh-color-red-orange-20
|
Red orange outline icon for dark scheme |
|
--rh-color-red-orange-60
|
Red orange icon for light scheme Red orange outline icon for light scheme Red orange outline text for light scheme |
|
--rh-color-red-orange-30
|
Red orange tag border for light scheme Red orange icon for dark scheme Red orange outline text for dark scheme |
|
--rh-color-orange-50
|
Orange tag border for dark scheme Label - Filled (Orange) accent color |
|
--rh-color-orange-70
|
Orange tag fill for dark scheme Orange text for light scheme Label - Filled (Orange) text color |
|
--rh-color-orange-10
|
Orange tag fill for light scheme Orange text for dark scheme Label - Filled (Orange) background color |
|
--rh-color-orange-20
|
Orange outline icon for dark scheme |
|
--rh-color-orange-60
|
Orange icon for light scheme Orange outline icon for light scheme Orange outline text for light scheme |
|
--rh-color-orange-30
|
Orange tag border for light scheme Orange icon for dark scheme Orange outline text for dark scheme Label - Filled (Orange) border color |
|
--rh-color-yellow-50
|
Yellow tag border for dark scheme |
|
--rh-color-yellow-70
|
Yellow tag fill for dark scheme Yellow text for light scheme Alert - Warning title text |
|
--rh-color-yellow-10
|
Yellow tag fill for light scheme Yellow text for dark scheme Alert - Warning background |
|
--rh-color-yellow-20
|
Yellow outline icon for dark scheme |
|
--rh-color-yellow-60
|
Yellow icon for light scheme Yellow outline icon for light scheme Yellow outline text for light scheme |
|
--rh-color-yellow-30
|
Yellow tag border for light scheme Yellow icon for dark scheme Yellow outline text for dark scheme |
|
--rh-color-green-50
|
Green tag border for dark scheme |
|
--rh-color-green-70
|
Green tag fill for dark scheme Green text for light scheme Alert - Success title text |
|
--rh-color-green-10
|
Green tag fill for light scheme Green text for dark scheme Alert - success background |
|
--rh-color-green-20
|
Green outline icon for dark scheme Label - Filled (Green) border color |
|
--rh-color-green-60
|
Green icon for light scheme Green outline icon for light scheme Green outline text for light scheme Alert - Success accent |
|
--rh-color-green-30
|
Green tag border for light scheme Green icon for dark scheme Green outline text for dark scheme |
|
--rh-color-teal-50
|
Teal tag border for dark scheme Alert - Default accent |
|
--rh-color-teal-70
|
Teal tag fill for dark scheme Teal text for light scheme Alert - Default title text |
|
--rh-color-teal-10
|
Teal tag fill for light scheme Teal text for dark scheme Alert - Default background |
|
--rh-color-teal-20
|
Teal outline icon for dark scheme |
|
--rh-color-teal-60
|
Teal icon for light scheme Teal outline icon for light scheme Teal outline text for light scheme |
|
--rh-color-teal-30
|
Teal tag border for light scheme Teal icon for dark scheme Teal outline text for dark scheme Label (Cyan) border color |
|
--rh-color-blue-50
|
Blue tag border for dark scheme Label - Filled (Blue) accent color |
|
--rh-color-blue-70
|
Blue tag fill for dark scheme Blue text for light scheme Alert - Info title text |
|
--rh-color-blue-10
|
Blue tag fill for light scheme Blue text for dark scheme Alert - Info background |
|
--rh-color-blue-20
|
Blue outline icon for dark scheme Label - Filled (Blue) border color |
|
--rh-color-blue-60
|
Blue icon for light scheme Blue outline icon for light scheme Blue outline text for light scheme Inline link hover (light theme) |
|
--rh-color-blue-30
|
Blue tag border for light scheme Blue icon for dark scheme Blue outline text for dark scheme Inline link (dark theme) |
|
--rh-color-purple-50
|
Purple tag border for dark scheme |
|
--rh-color-purple-70
|
Purple tag fill for dark scheme Purple text for light scheme Inline link visited hover (light theme) |
|
--rh-color-purple-10
|
Purple tag fill for light scheme Purple text for dark scheme Label - Filled (Purple) background color |
|
--rh-color-purple-20
|
Purple outline icon for dark scheme Inline link visited hover (dark theme) |
|
--rh-color-purple-60
|
Purple icon for light scheme Purple outline icon for light scheme Purple outline text for light scheme Inline link visited (light theme) |
|
--rh-color-purple-30
|
Purple tag border for light scheme Purple icon for dark scheme Purple outline text for dark scheme |
|
--rh-color-gray-10
|
Gray tag fill for light scheme Gray text for dark scheme Tertiary surface (light scheme) |
|
--rh-color-gray-20
|
Gray outline icon for dark scheme Secondary surface (light scheme) |
|
--rh-color-white
|
Outline variant fill for light scheme Lightest surface (light scheme) or primary text (dark scheme) |
|
--rh-color-gray-95
|
Outline variant fill for dark scheme Primary surface (dark scheme) or primary text (light scheme) |
|
--rh-color-gray-50
|
Gray tag border for dark scheme Outline variant border for dark scheme Subtle icon |
|
--rh-color-text-primary
|
Desaturated border color Desaturated icon color Desaturated text color |
|
--rh-color-gray-30
|
Gray tag border for light scheme Gray icon for dark scheme Gray outline text for dark scheme Outline variant border for light scheme Disabled fill for light scheme Disabled border for light scheme Subtle borders (light scheme) |
|
--rh-color-gray-70
|
Gray tag fill for dark scheme Gray text for light scheme Disabled fill for dark scheme Disabled border for dark scheme Tertiary surface (dark scheme) |
|
--rh-color-gray-60
|
Gray icon for light scheme Gray outline icon for light scheme Gray outline text for light scheme Disabled icon for light scheme Disabled text for light scheme Secondary text (light scheme) |
|
--rh-color-gray-40
|
Disabled icon for dark scheme Disabled text for dark scheme 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.
