Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Right Icon
A destructive button with right-aligned icon guiding users through dangerous multi-step workflows
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Delete and move forward—some destructive actions are steps in larger flows. This React button positions lucide-react icons right of text using shadcn/ui Button with gap-2 spacing. Built with trailing icon placement suggesting progression, it creates destructive navigation patterns. Perfect for 'Delete and Continue' workflows, 'Remove and Next' actions, or 'Cancel and Exit' operations where destruction isn't the end goal but a step toward completion in onboarding flows, form wizards, or account migration processes.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Destructive Left Icon
Icon before text for recognition
Text Only Destructive
Basic destructive styling
Standard Right Icon
Primary button with trailing icon
Destructive Dialog
Dangerous action confirmation
Rounded Destructive
Circular edge button styling
Breadcrumb Navigation
Multi-step flow indicator