Tag
Tag component is used to categorize content.
DraftInfoActiveAttentionErrorFeaturedNewArchivedPendingVerified
basic-demo
Usage#
import { Tag } from '@primereact/ui/tag';<Tag>Tag</Tag>Examples#
Severity#
Use severity property to define the severity of the tag.
PrimarySecondarySuccessInfoWarnDangerContrast
severity-demo
import { Tag } from '@primereact/ui/tag';
export default function SeverityDemo() {
return (
<div className="flex flex-wrap justify-center gap-2">
<Tag>Primary</Tag>
<Tag severity="secondary">Secondary</Tag>
<Tag severity="success">Success</Tag>
<Tag severity="info">Info</Tag>
<Tag severity="warn">Warn</Tag>
<Tag severity="danger">Danger</Tag>
<Tag severity="contrast">Contrast</Tag>
</div>
);
}
Pill#
Use rounded property to display a tag as a pill.
PrimarySecondarySuccessInfoWarnDangerContrast
pill-demo
import { Tag } from '@primereact/ui/tag';
export default function BasicDemo() {
return (
<div className="flex flex-wrap justify-center gap-2">
<Tag rounded>Primary</Tag>
<Tag severity="secondary" rounded>
Secondary
</Tag>
<Tag severity="success" rounded>
Success
</Tag>
<Tag severity="info" rounded>
Info
</Tag>
<Tag severity="warn" rounded>
Warn
</Tag>
<Tag severity="danger" rounded>
Danger
</Tag>
<Tag severity="contrast" rounded>
Contrast
</Tag>
</div>
);
}
Icon#
Place the icon left or right of the label.
PrimarySecondarySuccessInfoWarnDangerContrast
icon-demo
import { Check } from '@primeicons/react/check';
import { Cog } from '@primeicons/react/cog';
import { ExclamationTriangle } from '@primeicons/react/exclamation-triangle';
import { Search } from '@primeicons/react/search';
import { Times } from '@primeicons/react/times';
import { User } from '@primeicons/react/user';
import { Tag } from '@primereact/ui/tag';
export default function IconDemo() {
return (
<div className="flex flex-col items-center gap-4">
<div className="flex flex-wrap justify-center gap-2">
<Tag>
<User></User>
Primary
</Tag>
<Tag severity="secondary">
<User />
Secondary
</Tag>
<Tag severity="success">
<Check />
Success
</Tag>
<Tag severity="info">
<Search />
Info
</Tag>
<Tag severity="warn">
<ExclamationTriangle />
Warn
</Tag>
<Tag severity="danger">
<Times />
Danger
</Tag>
<Tag severity="contrast">
<Cog />
Contrast
</Tag>
</div>
</div>
);
}
Template#
Children of the component are passed as the content for templating.
Italytemplate-demo
import { Tag } from '@primereact/ui/tag';
export default function TemplateDemo() {
return (
<div className="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>
);
}
As button#
Use as="button" to display a tag as a button.
button-demo
import { Tag } from '@primereact/ui/tag';
export default function ButtonDemo() {
return (
<div className="flex flex-col items-center gap-4">
<Tag as="button">Button</Tag>
</div>
);
}
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.