Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Success

Simple Success Message Alert Dialog for React

A simple success dialog with one Continue button.

Framework
UI library

Some completions deserve more than a silent state change. This React alert dialog confirms that changes were saved with a Success! title and a single Continue button. It's shadcn.io's Alert Dialog on Base UI, kept to a title, a description and one action.

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

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.

All 39 alert dialog examples