Skip to content

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

Free

Success with Multiple Actions Alert Dialog for Ark UI

A success dialog that says an invitation was sent, with Close and a second action labeled Invite Another.

A centered check sits above Invitation Sent. The description mentions an email with join instructions. Neither button sends mail.

Offer a repeat action when people often do the same thing again. Otherwise one button is enough. The form they return to can be a Dialog. In React, Ark UI does not send the invitation.

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 asChild>
    <Button>Complete Action</Button>
  </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-success/10">
        <CircleCheckIcon aria-hidden="true" className="size-6 text-success" />
      </div>
      <AlertDialogTitle>Invitation Sent!</AlertDialogTitle>
      <AlertDialogDescription>
        Your team invitation has been sent successfully. They will receive an
        email with instructions to join.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Close</AlertDialogCancel>
      <AlertDialogClose asChild>
        <AlertDialogAction>Invite Another</AlertDialogAction>
      </AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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.

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