Angular Badge

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.