Tag

Tag component is used to categorize content.

Label of the tag is defined with the value property.

New

Label of the tag is defined with the value property.

New
basic-demo

Severity defines the color of the tag, possible values are success, info, warn and danger in addition to the default theme color.

PrimarySecondarySuccessInfoWarnDangerContrast
severity-demo

Enabling rounded, displays a tag as a pill.

PrimarySecondarySuccessInfoWarnDangerContrast
pill-demo

A font icon next to the value can be displayed with the icon property.

PrimarySecondarySuccessInfoWarnDangerContrast
icon-demo

Children of the component are passed as the content for templating.

CountryItaly
template-demo

Screen Reader

Tag does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the tags are dynamic,aria-live may be utilized as well. In case badges need to be tabbable, tabIndex can be added to implement custom key handlers.

Keyboard Support

Component does not include any interactive elements.

ON THIS PAGE
Figma UI Kit
The official Figma UI Kit for Prime UI libraries, the essential resource for designing with PrimeOne components.
Learn More