Skip to content

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

Free

Success with Centered Icon Alert Dialog for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not create the account.

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="true">
    <Button>Complete Action</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader class="sm:place-items-center sm:text-center">
      <div class="mb-2 flex size-12 items-center justify-center rounded-full bg-success/10">
        <CircleCheckIcon aria-hidden="true" class="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>
      <AlertDialogClose :asChild="true">
        <AlertDialogAction>Get Started</AlertDialogAction>
      </AlertDialogClose>
    </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.

API Reference

Alert Dialog

Sets asChild. 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