Alert Dialog

A dialog that asks to confirm an action before it happens.

<AlertDialog>  <AlertDialogTrigger render={<Button variant="outline" />}>    Show Dialog  </AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>      <AlertDialogDescription>        This action cannot be undone. This will permanently delete your account        and remove your data from our servers.      </AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter>      <AlertDialogCancel>Cancel</AlertDialogCancel>      <AlertDialogAction>Continue</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

Installation

$ npx shadcn@latest add @constella/alert-dialog

Usage

import {  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogTrigger,} from "@/components/primitives/alert-dialog";

AlertDialogAction doesn't close the dialog, so you can close it once the action is done. AlertDialogCancel does.

Composition

AlertDialog├── AlertDialogTrigger└── AlertDialogContent    ├── AlertDialogHeader    │   ├── AlertDialogMedia    │   ├── AlertDialogTitle    │   └── AlertDialogDescription    └── AlertDialogFooter        ├── AlertDialogCancel        └── AlertDialogAction

Size

Use size="sm" on AlertDialogContent for a short confirm: centered text over two equal buttons.

Size	Width
`default`	384px
`sm`	320px

<AlertDialogContent size="sm">…</AlertDialogContent>

Alert Dialog Media

Use AlertDialogMedia for an icon above the title. Pass color="danger" to AlertDialogAction for an action that can't be undone.

<AlertDialogHeader>  <AlertDialogMedia>    <HugeiconsIcon icon={Delete02Icon} />  </AlertDialogMedia>  <AlertDialogTitle>Delete chat?</AlertDialogTitle></AlertDialogHeader><AlertDialogFooter>  <AlertDialogCancel>Cancel</AlertDialogCancel>  <AlertDialogAction color="danger">Delete</AlertDialogAction></AlertDialogFooter>

Alert Dialog Action

AlertDialogAction doesn't close the dialog, so it can stay open while the work runs. Mark the action aria-busy with a Spinner, keep the dialog open until it's done, then close it.

<AlertDialog onOpenChange={(next) => !busy && setOpen(next)} open={open}>  …  <AlertDialogFooter>    <AlertDialogCancel disabled={busy}>Cancel</AlertDialogCancel>    <AlertDialogAction aria-busy={busy} onClick={revoke} color="danger">      {busy && <Spinner data-icon="inline-start" />}      {busy ? "Revoking" : "Revoke"}    </AlertDialogAction>  </AlertDialogFooter></AlertDialog>

API Reference

Part	Adds
`AlertDialogContent`	Renders the portal, backdrop, viewport and popup; `size`: `"sm"` or `"default"`
`AlertDialogAction`	A `Button`, `primary` by default
`AlertDialogCancel`	A `Button` that closes, `outline` by default

Every part takes sx, applied last. For the rest, see Base UI Alert Dialog.