Tag
Tag component is used to categorize content.
Import #
import { TagModule } from 'primeng/tag';
Basic #
Label of the tag is defined with the value property.
<p-tag value="New" />
Severity #
Severity defines the color of the tag, possible values are success, info, warning and danger in addition to the default theme color.
<p-tag severity="success" value="Success"/>
Pill #
Enabling rounded, displays a tag as a pill.
<p-tag value="Primary" [rounded]="true" />
Icon #
A font icon next to the value can be displayed with the icon property.
<p-tag icon="pi pi-user" value="Primary" />
Template #
Children of the component are passed as the content for templating.
Italy
<p-tag [style]="{ background: 'linear-gradient(to right, var(--surface-900), var(--surface-700)' }">
<div class="flex align-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>
Style #
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-tag | Tag element |
| p-tag-rounded | Rounded element |
| p-tag-icon | Icon of the tag |
| p-tag-value | Value of the 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.
Tag API
API defines helper props, events and others for the PrimeNG Tag module.
Tag #
Tag component is used to categorize content.
Properties #
Defines the input properties of the component.
Templates #
Defines the templates used by the component.