Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Badge examples · Secondary

Circular Badge with Count (Secondary) for React

A circular secondary badge showing a muted number for totals and other non-urgent counts.

Framework
UI library

A number in a muted circle informs without urgency. This React badge uses the Badge component's secondary variant with pill and size="lg": a fully rounded badge whose minimum width equals its height, so a single digit makes a circle. Use it for totals, pending reviews, drafts or any number that's context rather than a call to action, without the alarm of a destructive badge or the pull of the default one.

Preview

Preview width
3

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 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.

What does variant secondary change?

variant="secondary" uses the muted secondary fill and secondary-foreground text. The circle classes in this file stay as they are.

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.

Where do I put the number?

The digits are the badge text, 3 in this demo. Replace that text with the count you want to show.

All 20 badge examples