Badge can either be used as a standalone component or as a directive.
import Badge from 'primevue/badge';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/badge/badge.min.js"></script>
Content of the badge is specified using the value property.
<Badge value="2"></Badge>
import BadgeDirective from 'primevue/badgedirective';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"></script>
When used as a directive, badge needs to be configured at the application with a name of your choice.
import BadgeDirective from 'primevue/badgedirective';
app.directive('badge', BadgeDirective);
Next step is attaching it to an element.
<i class="pi pi-bell" v-badge="2"></i>
Different color options are available as severity levels. When used as a component use the severity property to apply a severity and use a modifier as the severity value in directive mode.
<Badge value="2" severity="success"></Badge>
<i class="pi pi-bell" v-badge.success="2"></i>
Buttons provide integrated badge support with the badge and badgeClass properties.
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
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.
<Badge value="2"></Badge>
<Badge value="4" size="large" severity="warning"></Badge>
<Badge value="6" size="xlarge" severity="success"></Badge>
In addition, when placed inside another element, badge sizes can also derive their size from their parent.
<h1>Heading 1 <Badge value="New"></Badge></h1>
<h2>Heading 2 <Badge value="New"></Badge></h2>
Content can easily be customized with the default slot instead of using the built-in display.
<Badge>
Content
</Badge>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| value | any | null | Value to display inside the badge. |
| severity | string | null | Severity type of the badge. |
| size | string | null | Size of the badge, valid options are "large" and "xlarge". |
Following is the list of structural style classes, for theming classes visit
| 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.
None.