AlertDialog

Modal confirmation for important or destructive actions. Uses role="alertdialog", a cancel action, and a confirm action that calls onConfirm (cancel / Escape never call onConfirm). The default export stays the assembled preset (title / onConfirm / triggerLabel). Compound parts (AlertDialog.Root, AlertDialog.Trigger, AlertDialog.Backdrop, AlertDialog.Popup, AlertDialog.Title, AlertDialog.Actions) are available for custom chrome. The trigger child must forward DOM props — there is no render prop.

State attributes, exit animation, and onOpenChange details are documented in Overlay lifecycle.

Examples

Default

Pass triggerLabel for a built-in open button. Set isDestructive to style confirm as danger and autofocus Cancel.

import { AlertDialog } from '@var-ui/react';

<AlertDialog
  triggerLabel="Delete"
  title="Delete item?"
  description="This cannot be undone."
  confirmLabel="Delete"
  isDestructive
  onConfirm={() => {}}
/>

Confirm pattern

Non-destructive confirms use the primary intent. Customize cancelLabel / confirmLabel to match the task.

import { AlertDialog } from '@var-ui/react';

<AlertDialog
  triggerLabel="Publish"
  title="Publish post?"
  description="Your draft will become visible to everyone with the link."
  confirmLabel="Publish"
  cancelLabel="Keep editing"
  onConfirm={() => {}}
/>

Props

Accessibility

Renders as an alertdialog with a focus trap. Destructive flows autofocus Cancel so Enter does not immediately confirm. Escape and the cancel button dismiss without calling onConfirm. Prefer a clear title and short description that name the irreversible consequence.