Alert Dialog

Usage

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

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>Archive</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Archive this project?</AlertDialogTitle>
      <AlertDialogDescription>You can restore it from Settings.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Archive</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Destructive

Use size="sm", an AlertDialogMedia icon and variant="destructive" on the action. AlertDialogAction and AlertDialogCancel take every Button variant.

Waiting for the request

AlertDialogAction doesn't close the dialog, so it can wait: control open, disable both buttons while the request runs, close on success and confirm with a Toast.

Typed confirmation

For what can't be undone and is easy to aim at the wrong thing (deleting a role, revoking the last admin), make people type its name. useConfirmText(text) holds the state; spread its inputProps onto AlertDialogConfirmInput and gate the action on matches. Call reset() when the dialog closes. As with any action here, AlertDialogAction doesn't close the dialog: control open and close it when the request succeeds.

const confirm = useConfirmText(role.key)

<AlertDialog onOpenChange={(open) => !open && confirm.reset()}>
  ...
  <AlertDialogConfirmInput {...confirm.inputProps} />
  <AlertDialogFooter>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction variant="destructive" disabled={!confirm.matches}>Delete</AlertDialogAction>
  </AlertDialogFooter>
</AlertDialog>

Guidelines

• The title is the question ("Delete workspace?"); the action repeats its verb ("Delete"), never "OK" or "Yes".
• Say what is lost and whether it can be undone.
• Ask for typed confirmation only when the loss is permanent and large. Typing for every delete teaches people to type without reading.
• Use it only for consequences. For a form or a task, use Dialog.
• Don't put variant="brand" on the action: confirming isn't the view's primary action. (Themes like Sunset style the default button themselves.)

API reference

Behaviour and props come from Base UI. See the Base UI Alert Dialog docs.