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 color="red">Red</rh-tag>
<rh-tag color="orange">Orange</rh-tag>
<rh-tag color="green">Green</rh-tag>
<rh-tag color="cyan">Cyan</rh-tag>
<rh-tag color="blue">Blue</rh-tag>
<rh-tag color="purple">Purple</rh-tag>
<rh-tag>Gray</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.
| Slot Name | Description |
|---|---|
icon |
Contains the tags's icon, e.g. web-icon-alert-success. |
|
Must contain the text for the tag. |
| 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 tag. |
|
|
| Part Name | Description |
|---|---|
icon |
container for the tag icon |
| CSS Property | Description | Default |
|---|---|---|
--rh-tag-margin-inline-end |
The margin at the end of the direction parallel to the flow of the text. |
4px
|
--rh-tag-padding-block-start |
The padding at the start of the direction perpendicular to the flow of the text. |
4px
|
--rh-tag-padding-block-end |
The padding at the end of the direction perpendicular to the flow of the text. |
4px
|
--rh-tag-padding-inline-start |
The padding at the start of the direction parallel to the flow of the text. |
8px
|
--rh-tag-padding-inline-end |
The padding at the end of the direction parallel to the flow of the text. |
8px
|
| Token | Copy |
|---|---|
--rh-border-radius-default
|
|
--rh-border-radius-pill
|
|
--rh-border-width-md
|
|
--rh-border-width-sm
|
|
--rh-color-blue-10
|
|
--rh-color-blue-20
|
|
--rh-color-blue-30
|
|
--rh-color-blue-50
|
|
--rh-color-blue-60
|
|
--rh-color-blue-70
|
|
--rh-color-border-interactive
|
|
--rh-color-border-subtle
|
|
--rh-color-gray-10
|
|
--rh-color-gray-20
|
|
--rh-color-gray-30
|
|
--rh-color-gray-40
|
|
--rh-color-gray-50
|
|
--rh-color-gray-60
|
|
--rh-color-gray-70
|
|
--rh-color-gray-95
|
|
--rh-color-green-10
|
|
--rh-color-green-20
|
|
--rh-color-green-30
|
|
--rh-color-green-50
|
|
--rh-color-green-60
|
|
--rh-color-green-70
|
|
--rh-color-orange-10
|
|
--rh-color-orange-20
|
|
--rh-color-orange-30
|
|
--rh-color-orange-50
|
|
--rh-color-orange-60
|
|
--rh-color-orange-70
|
|
--rh-color-purple-10
|
|
--rh-color-purple-20
|
|
--rh-color-purple-30
|
|
--rh-color-purple-50
|
|
--rh-color-purple-60
|
|
--rh-color-purple-70
|
|
--rh-color-red-10
|
|
--rh-color-red-20
|
|
--rh-color-red-30
|
|
--rh-color-red-50
|
|
--rh-color-red-60
|
|
--rh-color-red-70
|
|
--rh-color-red-orange-10
|
|
--rh-color-red-orange-20
|
|
--rh-color-red-orange-30
|
|
--rh-color-red-orange-50
|
|
--rh-color-red-orange-60
|
|
--rh-color-red-orange-70
|
|
--rh-color-surface-lighter
|
|
--rh-color-teal-10
|
|
--rh-color-teal-20
|
|
--rh-color-teal-30
|
|
--rh-color-teal-50
|
|
--rh-color-teal-60
|
|
--rh-color-teal-70
|
|
--rh-color-text-primary
|
|
--rh-color-white
|
|
--rh-color-yellow-10
|
|
--rh-color-yellow-20
|
|
--rh-color-yellow-30
|
|
--rh-color-yellow-50
|
|
--rh-color-yellow-60
|
|
--rh-color-yellow-70
|
|
--rh-font-family-body-text
|
|
--rh-font-size-body-text-sm
|
|
--rh-font-size-body-text-xs
|
|
--rh-font-weight-body-text-regular
|
|
--rh-length-3xs
|
|
--rh-line-height-body-text
|
|
--rh-size-icon-01
|
|
--rh-space-md
|
|
--rh-space-xs
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
