Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Success

Success with Multiple Actions Alert Dialog for React

A success dialog with Close and a follow-up action.

Framework
UI library

One invitation often leads to another. This React alert dialog confirms that an invitation was sent and offers Close or Invite Another. It's shadcn.io's Alert Dialog on Base UI with a centered success icon.

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

When should I offer a repeat action?

For actions people often do several times in a row: invitations, uploads, new items. For one-off milestones, a single button is enough.

What should the repeat button say?

The verb plus Another: Invite Another, Upload Another. It's clear without context.

Close or Done?

Close, since people may carry on with the workflow. Done suits a task that ends here.

Should it mention the email?

Yes. They will receive an email with instructions tells people the invitee has been contacted.

Which button is primary?

Invite Another is AlertDialogAction, the solid button; Close is AlertDialogCancel, the outline one.

Does Invite Another close the dialog?

Yes; open your invite form again 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.

All 39 alert dialog examples