Shadcn.io is not affiliated with official shadcn/ui
Confirmation with Icon
A confirmation dialog with an alert icon next to the title, adding visual emphasis to important user decisions
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.
Confirmation with Icon preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.