Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Success

Success with Centered Icon Alert Dialog for React

A success dialog with a large check icon centered above the title.

Framework
UI library

Creating an account is a milestone, not a transaction. This React alert dialog centers a check icon in a success-tinted circle above Account Created! and a Get Started button. It's shadcn.io's Alert Dialog on Base UI with a centered header.

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

Centered or inline icon?

Centered for milestones: account created, first purchase. Inline for routine completions, as in Success with Icon.

Why Get Started?

It points forward: people are at the start of something. Continue fits mid-flow, Done fits the end.

What size should the circle be?

size-12 around a size-6 icon.

How does it look in dark mode?

bg-success/10 and text-success are theme tokens with their own dark values, so there's nothing extra to add.

Should the description be centered?

Yes, with the header's sm:place-items-center sm:text-center, as long as it's short.

Does Get Started close the dialog?

Yes; navigate in its click handler. On Base UI, AlertDialogAction is a plain button that leaves the dialog open: control open and set it to false in the action's handler.

All 39 alert dialog examples