Tag

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-tag
  1. Usage
  2. rh-tag

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<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 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-tag/rh-tag.js';
</script>
 JSPM 
<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

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
--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
Edit this page on GitHub