Tag

Overview Style Guidelines Code Demos Accessibility

Installation

<rh-tag color="red">Red Hat</rh-tag>

Slots 2

Slot Name	Description
`icon`	Contains the labels's icon, e.g. web-icon-alert-success.
`undefined`	Must contain the text for the label.

Attributes 3

DOM Property	Description	Type	Default
`icon`	The icon to display in the label.	`string \| undefined`	`unknown`
`variant`	The variant of the label.	`'filled' \| 'outline' \| undefined`	`'filled'`
`color`	The color of the label.	`'blue' \| 'cyan' \| 'green' \| 'orange' \| 'purple' \| 'red' \| 'grey' \| 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 6

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`
`--pf-icon--size`		`—`

Design Tokens 0

None