Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Confirmation with Icon Alert Dialog for Solid

A confirmation with a warning icon beside Confirm Changes, asking before unsaved work would be discarded.

UI library: Ark UI

The warning icon sits beside the title. The description says unsaved changes will be lost. The buttons are Go Back and Continue. Nothing is discarded.

Use the icon so the risk reads before the sentence. Go Back is clearer than Cancel mid-edit. The form they return to can be a Dialog. In Solid, Ark UI does not drop the unsaved changes.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
    <AlertDialogTrigger asChild={props => <Button {...props()} variant="outline">Open Dialog</Button>} />
    <AlertDialogContent>
      <AlertDialogHeader>
        <div class="flex items-center gap-2">
          <CircleAlertIcon aria-hidden="true" class="size-5 text-warning" />
          <AlertDialogTitle>Confirm Changes</AlertDialogTitle>
        </div>
        <AlertDialogDescription>
          You have unsaved changes. Are you sure you want to continue? Your
          changes will be lost.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Go Back</AlertDialogCancel>
        <AlertDialogClose asChild={props => <AlertDialogAction {...props()}>Continue</AlertDialogAction>} />
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>

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.

API Reference

Alert Dialog

Sets asChild and props. The rest is on the Alert Dialog page.

Button

Sets props and variant="outline". The rest is on the Button page.

All 39 alert dialog examples