Tag
Installation
Learn more about how to install on our getting started docs.
<script type="module">
import '@rhds/elements/rh-tag/rh-tag.js';
</script>Import Map Example
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
}
}
</script>npm install @rhds/elements<script type="module">
import '@rhds/elements/rh-tag/rh-tag.js';
</script><script type="module">
import '@rhds/elements/rh-tag/rh-tag.js';
</script>Import Map Example
<script type="importmap">
{
"imports": {
"@rhds/elements/rh-tag/rh-tag.js": "./elements/rh-tag/rh-tag.js"
},
"scopes": {
"./": {
"@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
"@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
"@rhds/elements/rh-icon/rh-icon.js": "./elements/rh-icon/rh-icon.js",
"@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
"@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
"lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
"lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
"tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
},
"https://ga.jspm.io/": {
"@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
"@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
"@patternfly/pfe-core/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
"lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
"lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
"lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
"lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
"tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
}
}
}
</script>Usage
<rh-tag color="red">Red Hat</rh-tag>rh-tag
| Slot Name | Description |
|---|---|
icon |
Contains the labels's icon, e.g. web-icon-alert-success. |
undefined |
Must contain the text for the label. |
| DOM Property | Description | Type | Default |
|---|---|---|---|
icon |
The icon to display in the label. |
|
|
iconSet |
Icon set to display in the label |
|
|
variant |
The variant of the label. |
|
|
size |
The variant of the label. |
|
|
href |
optional href for linked tag. |
|
|
color |
The color of the label. |
|
|
None
| 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
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
