Skip to content

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

Free

Simple Success Message Alert Dialog for React

A success dialog titled Success, saying the changes were saved, with a single Continue button. Nothing was saved.

The title is Success. The text says the changes have been saved. Continue is the only button. Nothing in the demo was saved.

Use it when a silent update would leave people unsure. A small save is less interrupting as a Toast. In React, Base UI does not know whether a save worked.

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>
      <AlertDialogTitle>Success!</AlertDialogTitle>
      <AlertDialogDescription>
        Your changes have been saved successfully.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

Success dialog or toast?

A dialog for significant completions people should acknowledge, like a payment or an account created. A toast for routine ones, like a saved setting.

What should the title say?

Something short and plain: Success!, Saved!, Done!. The description says what actually happened.

What goes in the description?

What completed, in past tense and plain words: Your changes have been saved successfully.

When should it appear?

Right after the action completes, never before. For async work, show a loading state first and the dialog once the server confirms.

What should the button say?

Continue when there's a next step, Done when the task ends, Got it for a standalone notice.

Does Continue 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