Shadcn.io is not affiliated with official shadcn/ui
Badge with Icon on Left
A destructive badge with left-aligned icon for visually enhanced error states and critical warnings
Icons make badges scannable at a glance. This React badge combines shadcn/ui's destructive variant with a Lucide React icon positioned left of text for instant visual recognition. Built with mr-1 spacing and size-3 icon scaling, the pattern balances icon and text legibly. Perfect for error types with symbols (X for failed, Alert for critical, Ban for blocked), status categories needing quick identification, or any urgent indicator benefiting from iconic reinforcement—users process icons faster than text alone.
Badge with Icon on Left preview
Installation
Related Components
Destructive Icon Right
Right-aligned icon variant
Destructive Text Only
Text-only destructive badge
Outline with Icon Left
Neutral outlined icon badge
Standard with Icon Left
Default icon badge
Error with Icon
Full error alert with icon
Circular Count Badge
Round notification badge
FAQ
Was this page helpful?
Sign in to leave feedback.