Badge is a small status indicator for another element.
// import as component
import Badge from 'primevue/badge';
// import as directive
import BadgeDirective from 'primevue/badgedirective';
app.directive('badge', BadgeDirective);
Text to display is defined with the value property.
<Badge value="2"></Badge>
Severity defines the color of the badge, possible values are success, info, warning and danger in addition to the default theme color.
<Badge value="2"></Badge>
<Badge value="8" severity="success"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="12" severity="warning"></Badge>
<Badge value="3" severity="danger"></Badge>
Use the size property to customize the size of a Badge, currently large and xlarge are available as size options.
<Badge value="6" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warning"></Badge>
<Badge value="2"></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.
<i v-badge="2" class="pi pi-bell p-overlay-badge" style="font-size: 2rem" />
<i v-badge.danger="'5+'" class="pi pi-calendar p-overlay-badge" style="font-size: 2rem" />
<i v-badge.danger class="pi pi-envelope p-overlay-badge" style="font-size: 2rem" />
Buttons have built-in support for badges to display a badge inline.
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-badge | Badge element |
| p-overlay-badge | Wrapper of a badge and its target. |
| p-badge-dot | Badge element with no value. |
| p-badge-success | Badge element with success severity. |
| p-badge-info | Badge element with info severity. |
| p-badge-warning | Badge element with warning severity. |
| p-badge-danger | Badge element with danger severity. |
| p-badge-lg | Large badge element |
| p-badge-xl | Extra large badge element |
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.
Component does not include any interactive elements.