React Circular Badge with Count
A circular secondary badge displaying muted numeric counts for non-urgent notifications and supplementary metrics
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Numbers in gray circles inform without urgency. This React badge uses shadcn/ui's secondary variant with rounded-full and custom sizing for notification counts that are contextual rather than critical. Built with flex centering and zero padding to create perfect circular shape in subdued gray styling, the pattern communicates quantity without creating pressure. Perfect for total items, pending reviews, draft counts, or any numeric indicator that's informational rather than actionable—the gray circular badge provides awareness without the anxiety of destructive red or the prominence of primary colors.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-5.jsonRelated patterns you will also like
Secondary Text
Text-only gray badge
Destructive Circular Count
Urgent red count badge
Standard Circular Count
Primary count badge
Outline Circular Count
Minimal count badge
Secondary with Icon
Icon-enhanced gray badge
Avatar with Badge
Avatar notification badge