Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Badges

Notifications Button Button Group for React

Two bell buttons joined in a group, each with a notification badge on its corner, one showing 12 and one capped at 99+.

Framework
UI library

Icon buttons with an unread count. Each bell carries a small round Badge on its top corner, the default fill for 12 and the destructive fill for 99+. Since the buttons have no text, each one has an aria-label that includes the count.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

All 39 button group examples