Shadcn.io is not affiliated with official shadcn/ui
Badge with Text
A destructive red badge for error states, critical warnings, and urgent negative status indicators
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.
Badge with Text preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.