Badge

Getting Started

Badge can be used as a component.

Component

import { Badge } from 'primereact/badge';
 

Content of the badge is specified using the value property.

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

Severities

Different color options are available as severity levels. When used as a component use the severity property to apply a severity.

• success
• info
• warning
• danger

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

Button Badges

Buttons provide integrated badge support with the badge and badgeClass properties.

<Button type="button" label="Emails">
    <Badge value="2"></Badge>
</Button>

<Button type="button" label="Messages" icon="pi pi-users" className="p-button-warning">
    <Badge value="8" severity="danger">
</Button>
 

Sizes

Badge sizes are adjusted with the size property that accepts "large" and "xlarge" as the possible alternatives to the default size.

<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>
 

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Accessibility

This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.

Dependencies

None.