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 is a caption added to an element for better clarity and user convenience.
Slots
| Slot Name | Summary | Description |
|---|---|---|
[default]
|
Must contain the text for the label. |
|
icon
|
Contains the labels's icon, e.g. web-icon-alert-success. |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
icon
|
icon |
The icon to display in the tag. |
|
|
icon-set
|
iconSet |
Icon set to display in the tag |
|
|
variant
|
variant |
The variant of the tag. |
|
|
size
|
size |
The size of the tag. |
|
|
href
|
href |
optional href for linked tag. |
|
|
disabled
|
disabled |
Whether an interactive tag is disabled. |
|
|
color
|
color |
The color of the label. Note: 'cyan' will also work, but is deprecated |
|
|
Methods
None
Events
| Event Name | Description |
|---|---|
close
|
when a removable label's close button is clicked |
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
icon
|
container for the label icon |
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-tag-padding-block-start |
The padding at the start of the direction perpendicular to the flow of the text. |
0
|
--rh-tag-padding-inline-end |
The padding at the end of the direction parallel to the flow of the text. |
var(--rh-space-md, 8px)
|
--rh-tag-padding-block-end |
The padding at the end of the direction perpendicular to the flow of the text. |
0
|
--rh-tag-padding-inline-start |
The padding at the start of the direction parallel to the flow of the text. |
var(--rh-space-md, 8px)
|
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-length-3xs
|
2px length token |
|
--rh-color-surface-lighter
|
Tertiary surface (light theme) |
|
--rh-font-family-body-text
|
Body text font family |
|
--rh-font-size-body-text-sm
|
14px font size |
|
--rh-font-weight-body-text-regular
|
Regular font weight |
|
--rh-line-height-body-text
|
Line height for body text |
|
--rh-size-icon-01
|
16px icon box |
|
--rh-border-width-sm
|
1px border width; Example: Secondary CTA or Button |
|
--rh-color-border-subtle
|
|
|
--rh-border-radius-pill
|
Pill border radius; Example: Label |
|
--rh-border-radius-default
|
3px border radius; Example: Card |
|
--rh-space-xs
|
4px spacer |
|
--rh-border-width-md
|
2px border width: Example: Alert |
|
--rh-color-border-interactive
|
|
|
--rh-font-size-body-text-xs
|
12px font size |
|
--rh-space-md
|
8px spacer |
|
--rh-color-red-50
|
Brand red (light and dark theme) |
|
--rh-color-red-70
|
Darker brand red |
|
--rh-color-red-10
|
|
|
--rh-color-red-20
|
Lightest brand red |
|
--rh-color-red-60
|
Dark brand red |
|
--rh-color-red-30
|
Lighter brand red |
|
--rh-color-red-orange-50
|
|
|
--rh-color-red-orange-70
|
|
|
--rh-color-red-orange-10
|
|
|
--rh-color-red-orange-20
|
|
|
--rh-color-red-orange-60
|
|
|
--rh-color-red-orange-30
|
|
|
--rh-color-orange-50
|
Label - Filled (Orange) accent color |
|
--rh-color-orange-70
|
Label - Filled (Orange) text color |
|
--rh-color-orange-10
|
Label - Filled (Orange) background color |
|
--rh-color-orange-20
|
|
|
--rh-color-orange-60
|
|
|
--rh-color-orange-30
|
Label - Filled (Orange) border color |
|
--rh-color-yellow-50
|
|
|
--rh-color-yellow-70
|
Alert - Warning title text |
|
--rh-color-yellow-10
|
Alert - Warning background |
|
--rh-color-yellow-20
|
|
|
--rh-color-yellow-60
|
|
|
--rh-color-yellow-30
|
|
|
--rh-color-green-50
|
|
|
--rh-color-green-70
|
Alert - Success title text |
|
--rh-color-green-10
|
Alert - success background |
|
--rh-color-green-20
|
Label - Filled (Green) border color |
|
--rh-color-green-60
|
Alert - Success accent |
|
--rh-color-green-30
|
|
|
--rh-color-teal-50
|
Alert - Default accent |
|
--rh-color-teal-70
|
Alert - Default title text |
|
--rh-color-teal-10
|
Alert - Default background |
|
--rh-color-teal-20
|
|
|
--rh-color-teal-60
|
|
|
--rh-color-teal-30
|
Label (Cyan) border color |
|
--rh-color-blue-50
|
Label - Filled (Blue) accent color |
|
--rh-color-blue-70
|
Alert - Info title text |
|
--rh-color-blue-10
|
Alert - Info background |
|
--rh-color-blue-20
|
Label - Filled (Blue) border color |
|
--rh-color-blue-60
|
Inline link hover (light theme) |
|
--rh-color-blue-30
|
Inline link (dark theme) |
|
--rh-color-purple-50
|
|
|
--rh-color-purple-70
|
Inline link visited hover (light theme) |
|
--rh-color-purple-10
|
Label - Filled (Purple) background color |
|
--rh-color-purple-20
|
Inline link visited hover (dark theme) |
|
--rh-color-purple-60
|
Inline link visited (light theme) |
|
--rh-color-purple-30
|
|
|
--rh-color-gray-10
|
Tertiary surface (light theme) |
|
--rh-color-gray-20
|
Secondary surface (light theme) |
|
--rh-color-white
|
Lightest surface (light theme) or primary text (dark theme) |
|
--rh-color-gray-95
|
Primary surface (dark theme) or primary text (light theme) |
|
--rh-color-gray-50
|
Subtle icon |
|
--rh-color-text-primary
|
|
|
--rh-color-gray-30
|
Subtle borders (light theme) |
|
--rh-color-gray-70
|
Tertiary surface (dark theme) |
|
--rh-color-gray-60
|
Secondary text (light theme) |
|
--rh-color-gray-40
|
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.
