shadcn.io is not affiliated with official shadcn/ui
Badge examples · Standard
Circular Badge with Count (Standard) for React
A circular default badge showing a number for notifications, unread items or quantities.
A round number grabs attention differently than a word: 3 unread, 5 notifications, 12 pending. This React badge makes a circle with the Badge component's own props: pill rounds it fully and size="lg" sets a height and an equal minimum width, so a single digit sits in a perfect circle and two digits stretch it into a pill without clipping. Use it for notification counts, unread messages, cart quantities or pending tasks.
Preview
Installation
FAQ
How does the number become a circle in React?
pill sets rounded-full, and size="lg" adds h-6.5 and min-w-6.5, so one digit has a matching height and minimum width. A longer number widens past that minimum.
Which variant is this count?
No variant is set, so the count uses the default fill. secondary, outline and destructive are the other looks in this set. info, success and warning are available too.
How do I make the number make sense to a screen reader?
A bare number does not say what is counted. Put the noun in the badge, such as 3 unread, or set aria-label to 3 unread messages.
How do I make the circle smaller?
size also takes sm, which sets h-5 and min-w-5. Keep pill so the ends stay round.
Is the count a button?
No. The count is the text of a span. Place the badge next to the thing it counts. A control that does something is a Button.
Related
- Badge with Text (Standard)A default badge with a short label for a
- Avatar with Count Indicator (Standard)A round avatar with a red count of unread
- Circular Badge with Count (Secondary)A circular secondary badge showing a
- Button with Count (Standard)A count on the main action
- Badge with Icon on Left (Standard)A default badge with a star icon before
- Badge with Icon on Right (Standard)A default badge with a star icon after