Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Confirmation

Confirmation with Icon Alert Dialog for React

A confirmation dialog with a warning icon beside the title.

Framework
UI library

An icon signals the tone of a dialog before anyone reads it. This React alert dialog puts an amber alert icon beside the title of an unsaved-changes warning. It's shadcn.io's Alert Dialog on Base UI, with the icon and AlertDialogTitle side by side in a small flex row.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Which color should the icon use?

Match the message: text-warning for caution as here, text-destructive for destructive actions, text-success for success and text-info for information. These theme tokens adapt to dark mode on their own.

Should the icon go before or after the title?

Before it, in a flex items-center gap-2 row, so it's seen first. Put it above the title, centered, for a more dramatic dialog, as in Confirmation with Centered Icon.

What size works beside the title?

size-5 sits well next to the title text. Go to size-6 for a stronger warning; at size-4 the icon reads as decoration.

Do screen readers announce the icon?

No, it's aria-hidden. The title and description carry the message, so never rely on the icon alone to say something the text doesn't.

Can I use another icon set?

Yes. Any SVG component works in place of the Lucide icon; keep the same size and color classes so it lines up with the title.

Why Go Back instead of Cancel?

It says what happens: the reader returns to their unsaved work. Continue is fine for the action here because the title and description already explain that changes will be lost.

All 39 alert dialog examples