shadcn.io is an independent project built on shadcn/ui
Two icon bells in one group. The first badge says 12, and the button is named Notifications, 12 unread. The second badge says 99+ in red, and the button is named Alerts, more than 99 unread. The counts stay put. The bells do not open a list.
Use a badge on an icon button when the unread count is the point. Opening that list is a Popover, not the badge. In React, Ark UI does not update the unread count.
Installation
Anatomy
Usage
<ButtonGroup aria-label="Notifications">
<Button
aria-label="Notifications, 12 unread"
className="relative"
size="icon-sm"
variant="outline"
>
<BellIcon aria-hidden="true" />
<Badge className="absolute -end-2 -top-1 z-10 text-xs" pill size="sm">
12
</Badge>
</Button>
<Button
aria-label="Alerts, more than 99 unread"
className="relative"
size="icon-sm"
variant="outline"
>
<BellIcon aria-hidden="true" />
<Badge
className="absolute -end-2 -top-1 z-10 text-xs"
pill
size="sm"
variant="destructive"
>
99+
</Badge>
</Button>
</ButtonGroup>FAQ
How does the badge sit on the icon?
The Button has relative, and the Badge has absolute -end-2 -top-1 z-10. The z-10 keeps the first badge above the second button, whose border it overlaps.
How are the bell buttons named?
With aria-label: Notifications, 12 unread and Alerts, more than 99 unread. The label replaces the badge text, so the name is a full phrase rather than a bare number.
Where does 99+ come from?
It's the badge's text. Cap the number yourself before you pass it, since the badge shows whatever it gets.
Why is one badge red?
The second sets variant="destructive", for alerts that need attention. The first uses the default fill.
Is the count updated live?
No. Both numbers are written into the file. Pass your unread count to the badge and the aria-label together.
What does a bell open?
Nothing in the demo. A Popover with the notification list is the usual choice.
API Reference
Button Group
Sets aria-label="Notifications". The rest is on the Button Group page.
Button
Sets aria-label="Notifications, 12 unread", size="icon-sm", variant="outline" and aria-label="Alerts, more than 99 unread". The rest is on the Button page.
Badge
Sets pill, size="sm" and variant="destructive". The rest is on the Badge page.
