Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Left Icon
A destructive button with left-aligned icon providing visual context for delete actions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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