Skip to content

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

Free

Success with Centered Icon Alert Dialog for React

A success dialog with a check icon centered above Account Created, and a single button labeled Get Started.

The check sits in a tinted circle. The description says the account was created. Get Started does not open a next screen. No account was created.

Center the icon when the result is the whole message. A side icon fits a receipt. The next screen can be a Button in the page. In React, Base UI does not create the account.

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

Anatomy

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

Usage

<AlertDialog>
  <AlertDialogTrigger render={<Button />}>Complete Action</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader className="sm:place-items-center sm:text-center">
      <div className="mb-2 flex size-12 items-center justify-center rounded-full bg-success/10">
        <CircleCheckIcon aria-hidden="true" className="size-6 text-success" />
      </div>
      <AlertDialogTitle>Account Created!</AlertDialogTitle>
      <AlertDialogDescription>
        Your account has been created successfully. You can now start using
        all features.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogAction>Get Started</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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.

API Reference

Alert Dialog

No extra props in this demo. The rest is on the Alert Dialog page.

Button

No extra props in this demo. The rest is on the Button page.

All 39 alert dialog examples