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 |
None.