React Badge with Icon on Left
A destructive badge with left-aligned icon for visually enhanced error states and critical warnings
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-3.jsonRelated patterns you will also like
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