API and Development
AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogTrigger, AlertDialogSize from @prepared911/ui/alert-dialog.
| Prop | Type | Notes |
|---|---|---|
open | boolean | Controlled open state. |
defaultOpen | boolean | Initial state when uncontrolled. Defaults to false. |
onOpenChange | (open: boolean, details: AlertDialogOpenChangeDetails) => void | One call per request. details.reason is a PopupOpenChangeReason; details.cancel() vetoes a cancelable request. A press on the cancel or the action reports close-press with details.source set to the Button. |
initialFocus | AlertDialogFocusTarget | Ref or function; focused right after the dialog opens. Defaults to the AlertDialogCancel Button. |
finalFocus | AlertDialogFocusTarget | Ref or function; focused after every close. |
children | ReactNode | AlertDialogTrigger and AlertDialogContent. |
| Prop | Type | Notes |
|---|---|---|
children | AlertDialogControlElement | One Button or Link. Receives onClick, ref, aria-haspopup="dialog", and aria-expanded. |
| Prop | Type | Notes |
|---|---|---|
title | LocalizedMessage | Required. Heading (h2) that names the dialog through aria-labelledby. |
description | LocalizedMessage | Required. Referenced by aria-describedby. |
size | AlertDialogSize | Medium (default, --dialog-width-md, 512px) or Small (--dialog-width-sm, 384px). |
ref | Ref<HTMLDialogElement> | The dialog element. |
className | string | Appended after the generated classes. |
children | ReactNode | Usually one AlertDialogFooter. |
role="alertdialog" and aria-modal="true". It carries data-open while open and data-ending-style during the exit transition. There is no hideTitle, aria-label, or role prop.
| Prop | Type | Notes |
|---|---|---|
children | ReactNode | AlertDialogCancel then AlertDialogAction. They wrap on narrow dialogs. |
| Prop | Type | Notes |
|---|---|---|
children | AlertDialogControlElement | One Button. Receives onClick, which reports a cancelable close-press, and a ref that marks it as the default initial focus. Its own onClick runs first and its own ref still attaches. |
| Prop | Type | Notes |
|---|---|---|
children | AlertDialogControlElement | One Button. Its own onClick runs first and performs the action; the dialog then reports a cancelable close-press. |
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | {@link AlertDialogTrigger } and {@link AlertDialogContent }, in any order. |
defaultOpen | boolean | false | Initial open state when uncontrolled. |
finalFocus | PopupFocusTarget | — | Focused after every close. Omit to return focus to the element that was focused before the dialog opened. |
initialFocus | PopupFocusTarget | — | Focused right after the dialog opens. Omit to focus {@link AlertDialogCancel }, the least destructive action. Pass a target, such as the action, for a confirmation that is not destructive. |
onOpenChange | ((open: boolean, details: DialogOpenChangeDetails) => void) | — | Called once per open or close request: trigger press, cancel or action press (close-press), and Escape
(close-request). A backdrop press never closes an alert dialog. A cancelable request is vetoed with
details.cancel(); details.source is the pressed Button for a close-press. |
open | boolean | — | Controlled open state. Pair with {@link AlertDialogProps.onOpenChange}. |