Tag

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-tag/rh-tag.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-tag/rh-tag.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@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": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap 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 Wrap 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 Wrap lines

rh-tag

A tag is a caption added to an element for better clarity and user convenience.

Slots 2
Slot Name Description
icon

Contains the labels's icon, e.g. web-icon-alert-success.

Must contain the text for the label.
Attributes 6
Attribute DOM Property Description Type Default
icon icon

The icon to display in the label.

 
IconNameFor<IconSetName> | undefined
 
unknown
icon-set iconSet

Icon set to display in the label

 
IconSetName
 
'ui'
variant variant

The variant of the label.

 
'filled' | 'outline' | 'desaturated' | undefined
 
'filled'
size size

The variant of the label.

 
'compact' | undefined
 
unknown
href href

optional href for linked tag.

 
string | undefined
 
unknown
color color

The color of the label.

 
| 'red' | 'red-orange' | 'orange' | 'yellow' | 'green' | 'cyan' // deprecated | 'teal' | 'blue' | 'purple' | 'gray' | undefined
 
unknown
Methods 0
None
Events 1
Event Name Description
close

when a removable label's close button is clicked
CSS Shadow Parts 1
Part Name Description
icon

container for the label icon
CSS Custom Properties 5
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
Design Tokens 70
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