Badge is a small status indicator for another element.
import { Badge } from 'primereact/badge';<Badge>Badge</Badge>import { Badge } from 'primereact/badge';
export default function BasicDemo() {
return (
<div className="card flex justify-center">
<Badge>Badge</Badge>
</div>
);
}The severity property defines the visual style of a badge.
import { Badge } from 'primereact/badge';
export default function SeverityDemo() {
return (
<div className="card flex flex-wrap justify-center gap-2">
<Badge>Default</Badge>
<Badge severity="secondary">Secondary</Badge>
<Badge severity="success">Success</Badge>
<Badge severity="info">Info</Badge>
<Badge severity="warn">Warning</Badge>
<Badge severity="danger">Danger</Badge>
<Badge severity="contrast">Contrast</Badge>
</div>
);
}Use the size property to change the size of a badge.
import { Badge } from 'primereact/badge';
export default function SizeDemo() {
return (
<div className="card flex flex-wrap items-center justify-center gap-2">
<Badge size="small">Small</Badge>
<Badge>Default</Badge>
<Badge size="large">Large</Badge>
<Badge size="xlarge">XLarge</Badge>
</div>
);
}A badge can be added to any element by encapsulating the content with the Badge.Overlay component.
import { Badge } from 'primereact/badge';
export default function BasicDemo() {
return (
<div className="card flex flex-wrap justify-center gap-6">
<Badge.Overlay>
<i className="pi pi-bell" style={{ fontSize: '2rem' }} />
<Badge shape="circle">2</Badge>
</Badge.Overlay>
<Badge.Overlay>
<i className="pi pi-calendar" style={{ fontSize: '2rem' }} />
<Badge shape="circle" severity="danger">
4
</Badge>
</Badge.Overlay>
<Badge.Overlay>
<i className="pi pi-envelope" style={{ fontSize: '2rem' }} />
<Badge shape="circle"></Badge>
</Badge.Overlay>
</div>
);
}Buttons have built-in support for badges to display a badge inline.
import { Badge } from 'primereact/badge';
import { Button } from 'primereact/button';
export default function ButtonDemo() {
return (
<div className="card flex justify-center flex-wrap gap-4">
<Button type="button">
Emails
<Badge severity="secondary" shape="circle">
8
</Badge>
</Button>
<Button type="button" variant="outlined">
<i className="pi pi-users" />
Messages
<Badge severity="contrast" shape="circle">
2
</Badge>
</Button>
<Badge.Overlay>
<Button type="button" variant="outlined">
<i className="pi pi-bell" />
</Button>
<Badge severity="info" className="animate-pulse" />
</Badge.Overlay>
</div>
);
}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.
Component does not include any interactive elements.