Shadcn.io is not affiliated with official shadcn/ui
Button with Left Icon
A destructive button with left-aligned icon providing visual context for delete actions
Icons clarify intent faster than text alone. This React destructive button combines shadcn/ui Button with lucide-react icons positioned left of the label. Built with className="gap-2" for icon-text spacing and size-4 icon dimensions matching button typography, it creates recognizable delete patterns. Perfect for trash icons on delete buttons, cross marks on remove actions, or alert triangles on dangerous operations where icon reinforcement reduces misclicks and speeds recognition across international audiences.
Button with Left Icon preview
Installation
Related Components
Text Only Destructive
Basic destructive button styling
Destructive Right Icon
Icon positioned after text
Standard Left Icon
Primary button with left icon
Destructive Dialog Icon
Confirmation with icon header
Loading Destructive
Animated loading spinner icon
Destructive Badge
Error status indicators
FAQ
Was this page helpful?
Sign in to leave feedback.