Shadcn.io is not affiliated with official shadcn/ui
Circular Badge with Count
A circular secondary badge displaying muted numeric counts for non-urgent notifications and supplementary metrics
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.
Circular Badge with Count preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.