React Circular Badge with Count
A circular badge displaying a number for notification counts, unread items, or quantity indicators
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Round number badges grab attention differently than text badges—3 unread, 5 notifications, 12 pending. This React badge uses rounded-full with size-6 and flex items-center justify-center for perfect circular dimensions displaying counts. Built with shadcn/ui, it's optimized for single-digit to double-digit numbers. Perfect for notification indicators, unread message counts, cart item quantities, or pending task badges where quantifying items motivates user action.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-standard-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-standard-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-standard-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-standard-5.jsonRelated patterns you will also like
Text Badge
Standard text-based badge
Avatar Count Badge
Notification count on avatars
Secondary Count Badge
Subtle circular count variant
Notification Dot
Simple indicator without counts
Shopping Cart Badge
Cart item count indicators
Tab Count Badge
Unread counts on navigation tabs