Skip to content

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

Free

Confirmation with Centered Icon Alert Dialog for Solid

A confirmation with a help icon in a tinted circle, centered above Enable Notifications, and the choices Not Now or Enable.

UI library: Ark UI

A help icon sits in a tinted circle above Enable Notifications. The header is centered. The buttons are Not Now and Enable. Neither one turns notifications on.

Center the icon when the question is the whole dialog. The setting itself can be a Switch on the page. In Solid, Ark UI does not enable notifications.

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 class="sm:place-items-center sm:text-center">
        <div class="mb-2 flex size-12 items-center justify-center rounded-full bg-info/10">
          <CircleHelpIcon aria-hidden="true" class="size-6 text-info" />
        </div>
        <AlertDialogTitle>Enable Notifications?</AlertDialogTitle>
        <AlertDialogDescription>
          Stay up to date with important updates and messages from your team.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Not Now</AlertDialogCancel>
        <AlertDialogClose asChild={props => <AlertDialogAction {...props()}>Enable</AlertDialogAction>} />
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>

FAQ

When should I center the icon instead of putting it beside the title?

Center it for moments you want the reader to slow down on: permission requests, opt-ins, announcements. For routine confirmations an icon beside the title is quicker to scan, as in Confirmation with Icon.

How is the header centered?

AlertDialogHeader takes sm:place-items-center sm:text-center, so the circle, the title and the description line up in the middle from the sm breakpoint. Center everything in the header together; a centered icon over start-aligned text looks unfinished.

What size should the circle and icon be?

A size-12 circle around a size-6 icon keeps a 2:1 ratio that leaves even padding. A larger circle crowds small screens, a smaller one loses the emphasis.

Which colors should the circle use?

Use the theme's status tokens: bg-info/10 with text-info here, bg-success/10 and text-success for success, bg-warning/10 and text-warning for tips, bg-destructive/10 and text-destructive for danger. They follow light and dark mode with no dark: overrides.

Does the centered layout change what screen readers hear?

No. The icon is aria-hidden, and the dialog is announced by its AlertDialogTitle and AlertDialogDescription in DOM order. Keep centered descriptions to two or three lines, since long centered text is harder to read.

Can I use my own icon or illustration?

Yes. Swap the Lucide icon for any SVG or small image of the same size inside the circle, and keep it decorative with aria-hidden since the title carries the meaning.

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