Tag component is used to categorize content.
import { Tag } from 'primereact/tag';
<Tag></Tag>
Tag.Label
is used to define the label of the tag.
import { Tag } from 'primereact/tag';
export default function BasicDemo() {
return (
<div className="card flex justify-center">
<Tag>
<Tag.Label>New</Tag.Label>
</Tag>
</div>
);
}
Use Tag.Icon
to display an icon next to the label. Place the icon left or right of the label.
import { Tag } from 'primereact/tag';
export default function IconDemo() {
return (
<div className="card flex flex-col items-center gap-4">
<div className="flex flex-wrap justify-center gap-2">
<Tag>
<Tag.Icon>
<i className="pi pi-user"></i>
</Tag.Icon>
<Tag.Label>Primary</Tag.Label>
</Tag>
<Tag severity="secondary">
<Tag.Icon>
<i className="pi pi-user" />
</Tag.Icon>
<Tag.Label>Secondary</Tag.Label>
</Tag>
<Tag severity="success">
<Tag.Icon>
<i className="pi pi-check" />
</Tag.Icon>
<Tag.Label>Success</Tag.Label>
</Tag>
<Tag severity="info">
<Tag.Icon>
<i className="pi pi-search" />
</Tag.Icon>
<Tag.Label>Info</Tag.Label>
</Tag>
<Tag severity="warn">
<Tag.Icon>
<i className="pi pi-exclamation-triangle" />
</Tag.Icon>
<Tag.Label>Warn</Tag.Label>
</Tag>
<Tag severity="danger">
<Tag.Icon>
<i className="pi pi-times" />
</Tag.Icon>
<Tag.Label>Danger</Tag.Label>
</Tag>
<Tag severity="contrast">
<Tag.Icon>
<i className="pi pi-cog" />
</Tag.Icon>
<Tag.Label>Contrast</Tag.Label>
</Tag>
</div>
<div className="flex flex-wrap justify-center gap-2">
<Tag>
<Tag.Label>Primary</Tag.Label>
<Tag.Icon>
<i className="pi pi-user"></i>
</Tag.Icon>
</Tag>
<Tag severity="secondary">
<Tag.Label>Secondary</Tag.Label>
<Tag.Icon>
<i className="pi pi-user" />
</Tag.Icon>
</Tag>
<Tag severity="success">
<Tag.Label>Success</Tag.Label>
<Tag.Icon>
<i className="pi pi-check" />
</Tag.Icon>
</Tag>
<Tag severity="info">
<Tag.Label>Info</Tag.Label>
<Tag.Icon>
<i className="pi pi-search" />
</Tag.Icon>
</Tag>
<Tag severity="warn">
<Tag.Label>Warn</Tag.Label>
<Tag.Icon>
<i className="pi pi-exclamation-triangle" />
</Tag.Icon>
</Tag>
<Tag severity="danger">
<Tag.Label>Danger</Tag.Label>
<Tag.Icon>
<i className="pi pi-times" />
</Tag.Icon>
</Tag>
<Tag severity="contrast">
<Tag.Label>Contrast</Tag.Label>
<Tag.Icon>
<i className="pi pi-cog" />
</Tag.Icon>
</Tag>
</div>
</div>
);
}
Use severity
property to define the severity of the tag.
import { Tag } from 'primereact/tag';
export default function SeverityDemo() {
return (
<div className="card flex flex-wrap justify-center gap-2">
<Tag>
<Tag.Label>Primary</Tag.Label>
</Tag>
<Tag severity="secondary">
<Tag.Label>Secondary</Tag.Label>
</Tag>
<Tag severity="success">
<Tag.Label>Success</Tag.Label>
</Tag>
<Tag severity="info">
<Tag.Label>Info</Tag.Label>
</Tag>
<Tag severity="warn">
<Tag.Label>Warn</Tag.Label>
</Tag>
<Tag severity="danger">
<Tag.Label>Danger</Tag.Label>
</Tag>
<Tag severity="contrast">
<Tag.Label>Contrast</Tag.Label>
</Tag>
</div>
);
}
Use rounded
property to display a tag as a pill.
import { Tag } from 'primereact/tag';
export default function BasicDemo() {
return (
<div className="card flex flex-wrap justify-center gap-2">
<Tag rounded>
<Tag.Label>Primary</Tag.Label>
</Tag>
<Tag severity="secondary" rounded>
<Tag.Label>Secondary</Tag.Label>
</Tag>
<Tag severity="success" rounded>
<Tag.Label>Success</Tag.Label>
</Tag>
<Tag severity="info" rounded>
<Tag.Label>Info</Tag.Label>
</Tag>
<Tag severity="warn" rounded>
<Tag.Label>Warn</Tag.Label>
</Tag>
<Tag severity="danger" rounded>
<Tag.Label>Danger</Tag.Label>
</Tag>
<Tag severity="contrast" rounded>
<Tag.Label>Contrast</Tag.Label>
</Tag>
</div>
);
}
Children of the component are passed as the content for templating.
import { Tag } from 'primereact/tag';
export default function TemplateDemo() {
return (
<div className="card flex justify-center">
<Tag className="flex items-center gap-2 px-3" style={{ border: '2px solid var(--border-color)', background: 'transparent', color: 'var(--text-color)' }}>
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" className="flag flag-it" style={{ width: '18px' }} />
<span className="text-base">Italy</span>
</Tag>
</div>
);
}
Use as="button"
to display a tag as a button.
import { Tag } from 'primereact/tag';
export default function ButtonDemo() {
return (
<div className="card flex flex-col items-center gap-4">
<Tag as="button">
<Tag.Label>Button</Tag.Label>
</Tag>
</div>
);
}
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.
Component does not include any interactive elements.