Source: https://primereact.org/tag/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Tag

Tag component is used to categorize content.

Import#

import { Tag } from 'primereact/tag';

Copy

Basic#

Label of the tag is defined with the value property.

New

<Tag value="New"></Tag>

Copy

Severity#

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

PrimarySuccessInfoWarningDangerSecondaryContrast

<Tag value="Primary"></Tag>
<Tag severity="success" value="Success"></Tag>
<Tag severity="info" value="Info"></Tag>
<Tag severity="warning" value="Warning"></Tag>
<Tag severity="danger" value="Danger"></Tag>
<Tag severity="secondary" value="Secondary"></Tag>
<Tag severity="contrast" value="Contrast"></Tag>

Copy

Pill#

Enabling rounded, displays a tag as a pill.

PrimarySuccessInfoWarningDangerSecondaryContrast

<Tag value="Primary" rounded></Tag>
<Tag severity="success" value="Success" rounded></Tag>
<Tag severity="info" value="Info" rounded></Tag>
<Tag severity="warning" value="Warning" rounded></Tag>
<Tag severity="danger" value="Danger" rounded></Tag>
<Tag severity="secondary" value="Secondary" rounded></Tag>
<Tag severity="contrast" value="Contrast" rounded></Tag>

Copy

Icon#

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

PrimarySuccessInfoWarningDanger

<Tag className="mr-2" icon="pi pi-user" value="Primary"></Tag>
<Tag className="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag className="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag className="mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>

Copy

Template#

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

Italy

<Tag style={{background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}}>
    <div className="flex align-items-center gap-2">
        <img alt="Country" src="/images/flag/flag_placeholder.png" className="flag flag-it" style={{ width: '18px' }}/>
        <span className="text-base">Italy</span>
        <i className="pi pi-times text-xs"></i>
    </div>
</Tag>

Copy

Accessibility#

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.

Import
Basic
Severity
Pill
Icon
Template
Accessibility

PrimeReact 10.9.7 by PrimeTek