React Circular Badge with Count
A circular destructive badge displaying numeric counts for error notifications and urgent alerts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Numbers in circles demand attention. This React badge uses shadcn/ui's destructive variant with rounded-full and custom sizing for notification counts. Built with flex centering and zero padding to create perfect circular shape, the pattern maximizes visibility of numeric urgency. Perfect for error counts, unread critical alerts, failed item totals, or any urgent numeric indicator requiring instant recognition—the circular red badge is universally understood as needing attention.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-5.jsonRelated patterns you will also like
Destructive Text
Text-only destructive badge
Standard Circular Count
Neutral count badge
Outline Circular Count
Outlined count badge
Avatar with Badge
Avatar notification badge
Notification Badge
Positioned notification badges
Destructive with Icon
Icon-enhanced badge