shadcn.io is an independent project built on shadcn/ui
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 Vue, Ark UI does not send the invitation.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger :asChild="true">
<Button>Complete Action</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader class="sm:place-items-center sm:text-center">
<div class="mb-2 flex size-12 items-center justify-center rounded-full bg-success/10">
<CircleCheckIcon aria-hidden="true" class="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="true">
<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.
Should it mention the email?
Yes. They will receive an email with instructions tells people the invitee has been contacted.
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.
