Skip to content

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

Free

Success with Celebration Alert Dialog for React

A milestone dialog with a party icon, an Achievement Unlocked card named Century Club, and a button labeled Awesome.

The header is centered. The description says 100 tasks were completed. The card reads Century Club. Those figures are static. Awesome does not grant anything.

Save this for a real milestone, not every save. A routine success is a Toast. In React, Base UI does not count completed tasks.

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-primary/10">
        <PartyPopperIcon aria-hidden="true" className="size-6 text-primary" />
      </div>
      <AlertDialogTitle>Milestone Achieved!</AlertDialogTitle>
      <AlertDialogDescription>
        Congratulations! You&apos;ve completed 100 tasks. Keep up the great
        work!
      </AlertDialogDescription>
    </AlertDialogHeader>
    <div className="rounded-lg bg-linear-to-r from-primary/10 to-primary/5 p-4 text-center">
      <div className="font-medium text-muted-foreground text-xs uppercase">
        Achievement Unlocked
      </div>
      <div className="mt-1 font-semibold text-lg">Century Club</div>
    </div>
    <AlertDialogFooter>
      <AlertDialogAction>Awesome!</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

When is a celebration better than a plain success?

For rare milestones most people won't reach every day. Celebrating routine completions wears the effect out.

How is the card styled?

bg-linear-to-r from-primary/10 to-primary/5, a soft wash of the theme's primary color that works in light and dark mode. Keep it subtle in a serious product.

Which icon suits a celebration?

A party popper for playful milestones, a trophy for competitive ones, a cake for anniversaries. It sits in a size-12 bg-primary/10 circle and is aria-hidden.

What should the achievement say?

A category label, Achievement Unlocked, and a memorable name, Century Club. Names people would share work better than Congratulations.

What should the button say?

Something that matches the moment, like Awesome!, rather than OK.

Does Awesome! close the dialog?

Yes. On Base UI, AlertDialogAction is a plain button: control open and close the dialog in its handler, or use AlertDialogCancel for a button that only dismisses.

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