Button with Right Icon

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

npx shadcn@latest add https://www.shadcn.io/r/button-destructive-3.json

npx shadcn@latest add https://www.shadcn.io/r/button-destructive-3.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/button-destructive-3.json

bunx shadcn@latest add https://www.shadcn.io/r/button-destructive-3.json

Related Components

FAQ