Source: https://primereact.org/badge/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Badge

Badge is a small status indicator for another element.

Import#

import { Badge } from 'primereact/badge';

Copy

Basic#

Text to display is defined with the value property.

<Badge value="2"></Badge>

Copy

Severity#

Severity defines the color of the badge, possible values are success, info, warning and danger in addition to the default theme color.

28412375

<Badge value="2"></Badge>
<Badge value="8" severity="success"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="12" severity="warning"></Badge>
<Badge value="3" severity="danger"></Badge>
<Badge value="7" severity="secondary"></Badge>
<Badge value="5" severity="contrast"></Badge>

Copy

Size#

Use the size property to customize the size of a Badge, currently large and xlarge are available as size options.

642

<Badge value="6" size="xlarge" severity="success"></Badge>
<Badge value="4" size="large" severity="warning"></Badge>
<Badge value="2"></Badge>

Copy

Position#

A Badge can be positioned at the top right corner of an element by adding p-overlay-badge style class to the element and embedding the badge inside.

2__5+

<i className="pi pi-bell p-overlay-badge" style={{ fontSize: '2rem' }}>
    <Badge value="2"></Badge>
</i>
<i className="pi pi-calendar p-overlay-badge" style={{ fontSize: '2rem' }}>
    <Badge value="5+" severity="danger"></Badge>
</i>
<i className="pi pi-envelope p-overlay-badge" style={{ fontSize: '2rem' }}>
    <Badge severity="danger"></Badge>
</i>

Copy

Button#

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

Emails8Messages8

<Button type="button" label="Emails">
    <Badge value="8"></Badge>
</Button>
<Button type="button" label="Messages" icon="pi pi-users" severity="secondary">
    <Badge value="8" severity="danger"></Badge>
</Button>

Copy

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
Position
Button
Accessibility

PrimeReact 10.9.7 by PrimeTek