React Circular Badge with Count
A circular outlined badge displaying numeric counts for notifications, updates, and non-urgent numeric indicators
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Numbers in subtle circles inform without alarming. This React badge uses shadcn/ui's outline variant with rounded-full and custom sizing for notification counts that don't demand urgency. Built with flex centering and zero padding to create perfect circular shape, the outlined count pattern balances visibility with restraint. Perfect for unread counts, pending items, update notifications, or any numeric indicator that informs rather than alerts—the outlined circular badge communicates quantity without creating anxiety like destructive red variants do.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-outline-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-outline-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-outline-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-outline-5.jsonRelated patterns you will also like
Outline Text
Text-only outlined badge
Destructive Circular Count
Urgent error count badge
Standard Circular Count
Default count badge
Outline with Icon
Icon-enhanced outlined badge
Avatar with Badge
Avatar notification badge
Notification Badge
Positioned notification badges