Shadcn.io is not affiliated with official shadcn/ui
Button with Right Icon
A destructive button with right-aligned icon guiding users through dangerous multi-step workflows
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.
Button with Right Icon preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.