Source: https://primeng.org/badge

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

Badge

Badge is a small status indicator for another element.

Import #

import { BadgeModule } from 'primeng/badge'; import { OverlayBadgeModule } from 'primeng/overlaybadge';

Basic #

Content of the badge is specified using the value property.

2

<p-badge value="2" />

Severity #

Severity defines the color of the badge, possible values are success, info, warn and danger

2684935

<p-badge [value]="2" severity="success" />

Size #

Badge sizes are adjusted with the badgeSize property that accepts small, large and xlarge as the possible alternatives to the default size. Currently sizes only apply to component mode.

8642

<p-badge value="8" badgeSize="xlarge" severity="success" />

Overlay #

A badge can be added to any element by encapsulating the content with the OverlayBadge component.

2

4

<p-overlaybadge value="2"> <i class="pi pi-bell" style="font-size: 2rem"></i> </p-overlaybadge> <p-overlaybadge value="4" severity="danger"> <i class="pi pi-calendar" style="font-size: 2rem"></i> </p-overlaybadge> <p-overlaybadge severity="danger"> <i class="pi pi-envelope" style="font-size: 2rem"></i> </p-overlaybadge>

Button #

Buttons have built-in support for badges to display a badge inline.

Notifications2Inbox2

<p-button label="Emails" icon="pi pi-bell" label="Notifications" badge="2" />

Accessibility #

Screen Reader

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.

Keyboard Support

Component does not include any interactive elements.

• Import

• Basic

• Severity

• Size

• Overlay

• Button

• Accessibility

Templates

Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.

PrimeNG 20.3.0 by PrimeTek