AlertDialog

Modal confirmation for destructive actions; requires an explicit decision.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add alert-dialog

Dependencies

What add alert-dialog installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

npm

@base-ui/[email protected]

Examples

1 examples · 1 component

Confirm a destructive action

Requires a choice; it is not dismissed by an outside click.

API reference

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`AlertDialog` Modal root; does not close on backdrop click or Escape.	`—`	—
`AlertDialogTrigger` Opens the confirmation.	`button`	—
`AlertDialogContent` Portaled backdrop and panel; traps focus.	`div`	—
`AlertDialogTitle` Question or title of the confirmation.	`h2`	—
`AlertDialogDescription` Consequence of the action.	`p`	—
`AlertDialogClose` Closes it by confirming or cancelling.	`button`	—

States

The states that apply to this component and their visual treatment.

State	Treatment
Closed	Only the trigger is visible.
Open	Modal panel with trapped focus; the backdrop does not close it.
Decision	Only an AlertDialogClose closes it: confirm or cancel.

Accessibility

Use it only for decisions that justify an interruption (delete, discard). Unlike Dialog, it does not close on outside click or Escape: it forces a choice.

Name the risky action clearly on the button (for example, "Delete"), not just "OK". Focus stays trapped and returns to the trigger on close.