Tag

Tag component is used to categorize content.

Import #


import { Tag } from 'primeng/tag';

Basic #

Label of the tag is defined with the value property.

New


<p-tag value="New" />

Severity #

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

Primary

Secondary

Success

Info

Warn

Danger

Contrast


<p-tag value="Primary" />
<p-tag severity="secondary" value="Secondary" />
<p-tag severity="success" value="Success" />
<p-tag severity="info" value="Info" />
<p-tag severity="warn" value="Warn" />
<p-tag severity="danger" value="Danger" />
<p-tag severity="contrast" value="Contrast" />

Pill #

Enabling rounded, displays a tag as a pill.

Primary

Secondary

Success

Info

Warn

Danger

Contrast


<p-tag value="Primary" [rounded]="true" />
<p-tag severity="secondary" value="Secondary" [rounded]="true" />
<p-tag severity="success" value="Success" [rounded]="true" />
<p-tag severity="info" value="Info" [rounded]="true" />
<p-tag severity="warn" value="Warn" [rounded]="true" />
<p-tag severity="danger" value="Danger" [rounded]="true" />
<p-tag severity="contrast" value="Contrast" [rounded]="true" />

Icon #

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

Primary

Secondary

Success

Info

Warn

Danger

Contrast


<p-tag icon="pi pi-user" value="Primary" />
<p-tag icon="pi pi-search" severity="secondary" value="Secondary" />
<p-tag icon="pi pi-check" severity="success" value="Success" />
<p-tag icon="pi pi-info-circle" severity="info" value="Info" />
<p-tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn" />
<p-tag icon="pi pi-times" severity="danger" value="Danger" />
<p-tag icon="pi pi-cog" severity="contrast" value="Contrast" />

Template #

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

Italy


<p-tag [style]="{ border: '2px solid var(--border-color)', background: 'transparent', color: 'var(--text-color)'}">
    <div class="flex items-center gap-2 px-1">
        <img alt="Country" src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
        <span class="text-base">
            Italy
        </span>
    </div>
</p-tag>

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.

name	type	default	description
style	Object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
severity	"success" \| "info" \| "warn" \| "danger" \| "secondary" \| "contrast"	null	Severity type of the tag.
value	string	null	Value to display inside the tag.
icon	string	null	Icon of the tag to display next to the value.
rounded	boolean	false	Whether the corners of the tag are rounded.

class	description
p-tag	Class name of the root element
p-tag-icon	Class name of the icon element
p-tag-label	Class name of the label element

token	variable	description
root.fontSize	--p-tag-font-size	Font size of root
root.fontWeight	--p-tag-font-weight	Font weight of root
root.padding	--p-tag-padding	Padding of root
root.gap	--p-tag-gap	Gap of root
root.borderRadius	--p-tag-border-radius	Border radius of root
root.roundedBorderRadius	--p-tag-rounded-border-radius	Rounded border radius of root
icon.size	--p-tag-icon-size	Size of icon
primary.background	--p-tag-primary-background	Background of primary
primary.color	--p-tag-primary-color	Color of primary
secondary.background	--p-tag-secondary-background	Background of secondary
secondary.color	--p-tag-secondary-color	Color of secondary
success.background	--p-tag-success-background	Background of success
success.color	--p-tag-success-color	Color of success
info.background	--p-tag-info-background	Background of info
info.color	--p-tag-info-color	Color of info
warn.background	--p-tag-warn-background	Background of warn
warn.color	--p-tag-warn-color	Color of warn
danger.background	--p-tag-danger-background	Background of danger
danger.color	--p-tag-danger-color	Color of danger
contrast.background	--p-tag-contrast-background	Background of contrast
contrast.color	--p-tag-contrast-color	Color of contrast

Tag

Import #

Basic #

Severity #

Pill #

Icon #

Template #

Accessibility #

Screen Reader

Keyboard Support

Tag API

Tag #

Properties #

Templates #

Tag Theming

CSS Classes #

Tag Design Tokens #