Badge

Badge is a small status indicator for another element.


import { BadgeModule } from 'primeng/badge';

Content of the badge is specified using the value property.

2

<p-badge [value]="2"></p-badge>

Content of the badge is specified using the value property.

2

<i class="pi pi-bell text-3xl" pBadge value="2"></i>

Severity defines the color of the badge, possible values are success, info, warning and danger

29312

<p-badge [value]="2" severity="success"></p-badge>

Badge sizes are adjusted with the size property that accepts large and xlarge as the possible alternatives to the default size. Currently sizes only apply to component mode.

246

<p-badge value="4" size="large" severity="warning"></p-badge>

A Badge can be positioned at the top right corner of an element by adding p-overlay-badge style class to the element and embedding the badge inside.

210+

<i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i>

Buttons have built-in support for badges to display a badge inline.


<p-button label="Emails" badge="8" styleClass="mr-2"></p-button>

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-badgeBadge element
p-overlay-badgeWrapper of a badge and its target.
p-badge-dotBadge element with no value.
p-badge-successBadge element with success severity.
p-badge-infoBadge element with info severity.
p-badge-warningBadge element with warning severity.
p-badge-dangerBadge element with danger severity.
p-badge-lgLarge badge element
p-badge-xlExtra large badge element

Screen Reader

Badge 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 badges 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.