Tag
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
npm install @rhds/elements
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Add it to your page with this import statement
<script type="module">
import '@rhds/elements/rh-tag/rh-tag.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
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>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
rh-tag
A tag is a caption added to an element for better clarity and user convenience.
Slot Name | Description |
---|---|
icon |
Contains the labels's icon, e.g. web-icon-alert-success. |
|
Must contain the text for the label. |
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
icon |
icon |
The icon to display in the label. |
|
|
icon-set |
iconSet |
Icon set to display in the label |
|
|
variant |
variant |
The variant of the label. |
|
|
size |
size |
The variant of the label. |
|
|
href |
href |
optional href for linked tag. |
|
|
color |
color |
The color of the label. |
|
|
Event Name | Description |
---|---|
close |
when a removable label's close button is clicked |
Part Name | Description |
---|---|
icon |
container for the label 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-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-subtle
|
|
--rh-color-gray-10
|
|
--rh-color-gray-20
|
|
--rh-color-gray-30
|
|
--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-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.