Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Confirmation

Confirmation with Centered Icon Alert Dialog for React

A confirmation dialog with a large icon in a tinted circle centered above the title.

Framework
UI library

Some decisions deserve a moment of ceremony. This React alert dialog centers a help icon in a tinted circle above the title, so a permission request or an opt-in reads as more than a routine yes or no. It's built from shadcn.io's Alert Dialog on Base UI, with the circle and the centered header as plain Tailwind classes.

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

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.

All 39 alert dialog examples