PrimeBlocks Q1 2025 Update is here with 500+ Components! 🎉Discover Now

Tag

Tag component is used to categorize content.

Import #


import Tag from 'primevue/tag';

Basic #

Label of the tag is defined with the value property.

New


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

Severity #

Severity defines the variant of a tag.

PrimarySecondarySuccessInfoWarnDangerContrast


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

Pill #

Enabling rounded, displays a tag as a pill.

PrimarySecondarySuccessInfoWarnDangerContrast


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

Icon #

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

PrimarySecondarySuccessInfoWarnDangerContrast


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

Template #

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

Italy


<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/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
        <span class="text-base">Italy</span>
    </div>
</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
value	any	null	Value to display inside the tag.
severity	HintedString<"secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast">	null	Severity type of the tag.
rounded	boolean	false	Whether the corners of the tag are rounded.
icon	string	null	Icon of the tag to display next to the value.
dt	any	null	It generates scoped CSS variables using design tokens for the component.
pt	PassThrough<TagPassThroughOptions>	null	Used to pass attributes to DOM elements inside the component.
ptOptions	any	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	parameters	returnType	description
default		VNode<RendererNode, RendererElement, Object>[]	Custom content template
icon		VNode<RendererNode, RendererElement, Object>[]	Custom icon template

name	type	default	description
instance	any	null	Defines instance.
props	TagProps	null	Defines valid properties.
attrs	any	null	Defines valid attributes.
parent	any	null	Defines parent options.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
root	TagPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
icon	TagPassThroughOptionType	null	Used to pass attributes to the icon's DOM element.
label	TagPassThroughOptionType	null	Used to pass attributes to the label's DOM element.
hooks	any	null	Used to manage all lifecycle hooks.

Tag

Import #

Basic #

Severity #

Pill #

Icon #

Template #

Accessibility #

Screen Reader

Keyboard Support

Tag API

Tag #

Props #

Slots #

Interfaces #

TagPassThroughMethodOptions #

TagPassThroughOptions #

TagPassThroughAttributes #

Types #

TagPassThroughOptionType #

TagEmits #