Angular Badge is a small status indicator for another element.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Getting Started
Badge can either be used as a standalone component or as a directive.
import {BadgeModule} from 'primeng/badge';
Component Content of the badge is specified using the value property.
<p-badge [value]="2"></p-badge>
Directive Content of the badge is specified using the value property.
<i class="pi pi-bell" pBadge value="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
<p-badge [value]="2" severity="success" severity="success"></p-badge>
<i class="pi pi-bell" pBadge value="2" severity="success"></i>
Button Badges
Buttons provide integrated badge support with the badge and badgeClass properties.
<p-button label="Emails" badge="8" styleClass="p-mr-2"></p-button>
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
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.
<p-badge value="2"></p-badge>
<p-badge value="4" size="large" severity="warning"></p-badge>
<p-badge value="6" size="xlarge" severity="success"></p-badge>
<h1>Heading 1 <p-badge value="New"></p-badge></h1>
<h2>Heading 2 <p-badge value="New"></p-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 PrimeNG Badge showcase for demos and documentation.