Badge
Badge is a small status indicator for another element.
Approved Rejected Warning Pending Draft Featured 3 NewOnline PrivateSecurity issue
preview
Installation#
npx shadcn@latest add @primereact/badge
Usage#
import { Badge } from '@/components/ui/badge';<Badge>Badge</Badge>Examples#
Basic#
Badge
basic-demo
import { Badge } from '@/components/ui/badge';
export default function BasicDemo() {
return (
<div className="flex justify-center">
<Badge>Badge</Badge>
</div>
);
}
Severity#
The severity property defines the visual style of a badge.
DefaultSecondarySuccessInfoWarningDangerContrast
severity-demo
import { Badge } from '@/components/ui/badge';
export default function SeverityDemo() {
return (
<div className="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>
);
}
Size#
Use the size property to change the size of a badge.
SmallDefaultLargeXLarge
size-demo
import { Badge } from '@/components/ui/badge';
export default function SizeDemo() {
return (
<div className="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>
);
}
Overlay#
A badge can be added to any element by encapsulating the content with the OverlayBadge component.
2
4
overlay-demo
import { Badge } from '@/components/ui/badge';
import { OverlayBadge } from '@/components/ui/overlaybadge';
import { Bell, Calendar, Envelope } from '@primeicons/react';
export default function BasicDemo() {
return (
<div className="flex flex-wrap justify-center gap-6">
<OverlayBadge>
<Bell size={24} />
<Badge shape="circle">2</Badge>
</OverlayBadge>
<OverlayBadge>
<Calendar size={24} />
<Badge shape="circle" severity="danger">
4
</Badge>
</OverlayBadge>
<OverlayBadge>
<Envelope size={24} />
<Badge shape="circle"></Badge>
</OverlayBadge>
</div>
);
}
Button#
Buttons have built-in support for badges to display a badge inline.
button-demo
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { OverlayBadge } from '@/components/ui/overlaybadge';
import { Bell, Users } from '@primeicons/react';
export default function ButtonDemo() {
return (
<div className="flex justify-center flex-wrap gap-4">
<Button type="button">
Emails
<Badge severity="secondary" shape="circle">
8
</Badge>
</Button>
<Button type="button" variant="outlined">
<Users />
Messages
<Badge severity="contrast" shape="circle">
2
</Badge>
</Button>
<OverlayBadge>
<Button type="button" variant="outlined">
<Bell />
</Button>
<Badge severity="info" className="animate-pulse" />
</OverlayBadge>
</div>
);
}
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.