React Badge with Text
A destructive red badge for error states, critical warnings, and urgent negative status indicators
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Red means stop, danger, or critical. This React badge uses shadcn/ui's destructive variant for error states and urgent warnings that demand immediate attention. Built with bold red background and white text for maximum contrast, the destructive styling signals problems that need action. Perfect for error counts, failed status, critical alerts, or any negative state requiring instant recognition—the red color triggers psychological urgency while remaining accessible and scannable.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-1.jsonRelated patterns you will also like
Destructive with Link
Clickable destructive badge
Destructive with Icon Left
Icon-enhanced destructive badge
Outline Badge
Neutral outlined variant
Standard Badge
Default badge variant
Error Alert
Full error message component
Circular Count Badge
Round notification count