AlertDialog
alert-dialogRequests confirmation for consequential actions in a blocking accessible dialog.
Usage
Basic usage
Forced confirmation before destruction/irreversible operation: default does not respond to point mask / Esc closed, must explicitly click button decision.
<AlertDialog>
<AlertDialogTrigger>Delete item</AlertDialogTrigger>
<AlertDialogContent title="Delete project?" description="This operation is irreversible and the project data will be permanently deleted.">
<AlertDialogClose>Cancel</AlertDialogClose>
<AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogContent>
</AlertDialog>Only description without description
description can be omitted, leaving just the title as a11y label.
<AlertDialog>
<AlertDialogTrigger>Log out</AlertDialogTrigger>
<AlertDialogContent title="Confirm to log out?">
<AlertDialogClose>Cancel</AlertDialogClose>
<AlertDialogClose>Exit</AlertDialogClose>
</AlertDialogContent>
</AlertDialog>Open by default
Use uncontrolled defaultOpen to expand the dialog box initially (for controlled use, use open + onOpenChange).
<AlertDialog defaultOpen>
<AlertDialogTrigger>Empty Recycle Bin</AlertDialogTrigger>
<AlertDialogContent title="Empty the Recycle Bin?" description="28 of the files will be permanently deleted and cannot be recovered.">
<AlertDialogClose>Cancel</AlertDialogClose>
<AlertDialogClose>Clear</AlertDialogClose>
</AlertDialogContent>
</AlertDialog>When to use
Use AlertDialog before a destructive or irreversible action, such as deletion, clearing data, or leaving unsaved work. Overlay clicks and Escape deliberately do not close it; the user must choose Cancel or Confirm. Use Dialog for a normally dismissible dialog or Modal for an imperative one-line confirmation.
Import
import { AlertDialog, AlertDialogTrigger, AlertDialogClose, AlertDialogContent } from "@hulianui/ui"Props
AlertDialog, AlertDialogTrigger, and AlertDialogClose are thin wrappers around their Base UI AlertDialog primitives. Trigger and Close accept className or render to supply an element. AlertDialogContent adds HulianUI styling:
| Name | Type | Default | Description |
|---|---|---|---|
AlertDialogContent.className | string | — | Content-container class name. |
Events
| Event | Type | Description |
|---|---|---|
AlertDialog.onOpenChange | (open: boolean) => void | Called when the open state changes; forwarded to Base UI AlertDialog Root. |
Slots
| Slot | Type | Description |
|---|---|---|
AlertDialogContent.title * | ReactNode | Required title and accessible label. |
AlertDialogContent.description | ReactNode | Supporting copy. |
AlertDialogContent.children | ReactNode | Bottom action area for Cancel and Confirm buttons; use AlertDialogClose for cancellation. |
Example
<AlertDialog>
<AlertDialogTrigger className="…">Delete project</AlertDialogTrigger>
<AlertDialogContent title="Delete project?" description="This cannot be undone and project data will be permanently removed.">
<AlertDialogClose className="…">Cancel</AlertDialogClose>
<AlertDialogClose className="…">Delete</AlertDialogClose>
</AlertDialogContent>
</AlertDialog>Usage guidelines
- Ignoring overlay clicks and Escape is intentional forced-decision behavior. Use Dialog when lightweight dismissal is appropriate.
- A cancel button must use
AlertDialogCloseto close the dialog. Confirmation commonly uses it as well and performs the operation fromonClick.