React Badge is a small status indicator for another element.
Setup
Refer to PrimeReact setup documentation for download and installation steps for your environment.
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>
Theming
Badge supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeReact Badge showcase for demos and documentation.