Vue3 Badge is a small status indicator for another element. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Getting Started
Badge can either be used as a standalone component or as a directive.
Component
import Badge from 'primevue/badge';
Content of the badge is specified using the value property.
<Badge value="2"></Badge>
Directive
import BadgeDirective from 'primevue/badgedirective';
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>
Severities
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.
- success
- info
- warning
- danger
<Badge value="2" severity="success"></Badge>
<i class="pi pi-bell" v-badge.success="2"></i>
Button Badges
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" />
Sizes
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>
Theming
Badge supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue Badge showcase for demos and documentation.