React Alert Dialog - Confirmation with Icon
A confirmation dialog with an alert icon next to the title, adding visual emphasis to important user decisions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Icons aren't just decoration—they're instant visual signals. This React alert dialog pairs an amber AlertCircle icon from Lucide React with the title to immediately communicate caution. Built with shadcn/ui and Radix UI, the icon draws attention and reinforces the message's importance before users even read the text. Perfect for unsaved changes warnings, navigation confirmations, or any decision that needs extra visual weight.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-confirmation-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-confirmation-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-confirmation-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-confirmation-2.jsonRelated patterns you will also like
Simple Confirmation
Basic confirmation without icon
Destructive with Icon
Red destructive styling with warning icon
Success with Icon
Success confirmation with checkmark icon
Informational with Icon
Info message with info circle icon
Centered Icon
Icon displayed above title instead of inline
Alert Banner
Inline alert component alternative
Questions you might have
React Alert Dialog - Simple Confirmation Dialog
A simple confirmation dialog with Cancel and Continue actions for critical user decisions requiring explicit confirmation
React Alert Dialog - Confirmation with Detailed Description
A confirmation dialog with detailed bullet-point description explaining multiple consequences of the user's action