Alert Dialog

<AlertDialog>  <AlertDialogTrigger asChild>    <Button variant="outline">Delete account</Button>  </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 variant="destructive">Delete account</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@reva/ui";

Use AlertDialog for confirmations that interrupt the flow — destructive deletions, irreversible actions, or anything that needs an explicit decision before continuing. Reach for Dialog instead when the surface is for editing, browsing, or any task the user can dismiss without consequence.

AlertDialogAction and AlertDialogCancel accept Reva Button variant and size props. Pass variant="destructive" on the action when confirming a delete.

Composition

Use the following composition to build an AlertDialog:

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

Examples

Neutral confirmation

For confirmations that are not destructive, leave AlertDialogAction on its default Button variant.

<AlertDialog>  <AlertDialogTrigger asChild>    <Button variant="outline">Publish</Button>  </AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogTitle>Publish this draft?</AlertDialogTitle>      <AlertDialogDescription>        Your draft will become visible to everyone with access to this workspace.      </AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter>      <AlertDialogCancel>Cancel</AlertDialogCancel>      <AlertDialogAction>Publish</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

Custom action label

Action and cancel labels accept any string. Pair the action label with the verb the user is committing to.

<AlertDialog>  <AlertDialogTrigger asChild>    <Button variant="outline">Sign out everywhere</Button>  </AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogTitle>Sign out of all devices?</AlertDialogTitle>      <AlertDialogDescription>        You will need to sign in again on each device. Active sessions on browsers and the mobile app will end immediately.      </AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter>      <AlertDialogCancel>Stay signed in</AlertDialogCancel>      <AlertDialogAction>Sign out everywhere</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state on `AlertDialog` root.
`defaultOpen`	`boolean`	—	Initial uncontrolled open state on `AlertDialog` root.
`onOpenChange`	`(open: boolean) => void`	—	Fires when the open state changes.
`size`	`"default" \| "sm"`	`"default"`	Width preset on `AlertDialogContent`. `sm` keeps the dialog narrow.
`variant`	Reva `Button` `variant`	`"default"`	On `AlertDialogAction`; pass `"destructive"` for delete confirmations.
`variant`	Reva `Button` `variant`	`"outline"`	On `AlertDialogCancel`.
`size`	Reva `Button` `size`	`"default"`	On `AlertDialogAction` / `AlertDialogCancel`.