Tag

OverviewStyleGuidelinesCodeAccessibilityDemos

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.2/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines
NPM
npm install @rhds/elements
Copy to Clipboard Wrap lines
JSPM
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</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
Full CSS Variable Permalink to this token
--rh-border-width-md
Full CSS Variable Permalink to this token
--rh-border-width-sm
Full CSS Variable Permalink to this token
--rh-color-blue-10
Full CSS Variable Permalink to this token
--rh-color-blue-20
Full CSS Variable Permalink to this token
--rh-color-blue-30
Full CSS Variable Permalink to this token
--rh-color-blue-50
Full CSS Variable Permalink to this token
--rh-color-blue-60
Full CSS Variable Permalink to this token
--rh-color-blue-70
Full CSS Variable Permalink to this token
--rh-color-border-subtle
Full CSS Variable Permalink to this token
--rh-color-gray-10
Full CSS Variable Permalink to this token
--rh-color-gray-20
Full CSS Variable Permalink to this token
--rh-color-gray-30
Full CSS Variable Permalink to this token
--rh-color-gray-50
Full CSS Variable Permalink to this token
--rh-color-gray-60
Full CSS Variable Permalink to this token
--rh-color-gray-70
Full CSS Variable Permalink to this token
--rh-color-gray-95
Full CSS Variable Permalink to this token
--rh-color-green-10
Full CSS Variable Permalink to this token
--rh-color-green-20
Full CSS Variable Permalink to this token
--rh-color-green-30
Full CSS Variable Permalink to this token
--rh-color-green-50
Full CSS Variable Permalink to this token
--rh-color-green-60
Full CSS Variable Permalink to this token
--rh-color-green-70
Full CSS Variable Permalink to this token
--rh-color-orange-10
Full CSS Variable Permalink to this token
--rh-color-orange-20
Full CSS Variable Permalink to this token
--rh-color-orange-30
Full CSS Variable Permalink to this token
--rh-color-orange-50
Full CSS Variable Permalink to this token
--rh-color-orange-60
Full CSS Variable Permalink to this token
--rh-color-orange-70
Full CSS Variable Permalink to this token
--rh-color-purple-10
Full CSS Variable Permalink to this token
--rh-color-purple-20
Full CSS Variable Permalink to this token
--rh-color-purple-30
Full CSS Variable Permalink to this token
--rh-color-purple-50
Full CSS Variable Permalink to this token
--rh-color-purple-60
Full CSS Variable Permalink to this token
--rh-color-purple-70
Full CSS Variable Permalink to this token
--rh-color-red-10
Full CSS Variable Permalink to this token
--rh-color-red-20
Full CSS Variable Permalink to this token
--rh-color-red-30
Full CSS Variable Permalink to this token
--rh-color-red-50
Full CSS Variable Permalink to this token
--rh-color-red-60
Full CSS Variable Permalink to this token
--rh-color-red-70
Full CSS Variable Permalink to this token
--rh-color-red-orange-10
Full CSS Variable Permalink to this token
--rh-color-red-orange-20
Full CSS Variable Permalink to this token
--rh-color-red-orange-30
Full CSS Variable Permalink to this token
--rh-color-red-orange-50
Full CSS Variable Permalink to this token
--rh-color-red-orange-60
Full CSS Variable Permalink to this token
--rh-color-red-orange-70
Full CSS Variable Permalink to this token
--rh-color-surface-lighter
Full CSS Variable Permalink to this token
--rh-color-teal-10
Full CSS Variable Permalink to this token
--rh-color-teal-20
Full CSS Variable Permalink to this token
--rh-color-teal-30
Full CSS Variable Permalink to this token
--rh-color-teal-50
Full CSS Variable Permalink to this token
--rh-color-teal-60
Full CSS Variable Permalink to this token
--rh-color-teal-70
Full CSS Variable Permalink to this token
--rh-color-text-primary
Full CSS Variable Permalink to this token
--rh-color-white
Full CSS Variable Permalink to this token
--rh-color-yellow-10
Full CSS Variable Permalink to this token
--rh-color-yellow-20
Full CSS Variable Permalink to this token
--rh-color-yellow-30
Full CSS Variable Permalink to this token
--rh-color-yellow-50
Full CSS Variable Permalink to this token
--rh-color-yellow-60
Full CSS Variable Permalink to this token
--rh-color-yellow-70
Full CSS Variable Permalink to this token
--rh-font-family-body-text
Full CSS Variable Permalink to this token
--rh-font-size-body-text-sm
Full CSS Variable Permalink to this token
--rh-font-size-body-text-xs
Full CSS Variable Permalink to this token
--rh-font-weight-body-text-regular
Full CSS Variable Permalink to this token
--rh-line-height-body-text
Full CSS Variable Permalink to this token
--rh-size-icon-01
Full CSS Variable Permalink to this token
--rh-space-md
Full CSS Variable Permalink to this token
--rh-space-xs
Full CSS Variable Permalink to this token