React Alert Dialog - Actions with Icons
An alert dialog with icons inside action buttons to provide visual context for each choice
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Button text alone doesn't always convey intent—icons add instant recognition. This React alert dialog adds Lucide React icons directly inside AlertDialogAction buttons to reinforce what happens when clicked. Built with shadcn/ui and Radix UI, icons like ExternalLink make actions clearer without extra words. Perfect for external navigation warnings, file downloads, or any action where an icon communicates purpose faster than text alone.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-custom-actions-1.jsonRelated patterns you will also like
Custom Button Labels
Contextual text labels without icons
Mixed Button Styles
Different button variants for visual hierarchy
Icon Button
Standalone button with icon patterns
Vertical Button Stack
Stacked buttons for multiple actions
Icon in Title
Icon positioned in dialog title instead
Standard Dialog
General dialog with flexible actions
Questions you might have
React Alert Dialog - Confirmation with Centered Icon
A confirmation dialog with large centered icon in a colored circle above the title for maximum visual impact
React Alert Dialog - Vertical Button Stack
An alert dialog with vertically stacked action buttons for multiple choices displayed in a full-width layout