Alert Dialog

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogTrigger, AlertDialogSize from @prepared911/ui/alert-dialog.

AlertDialog

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.
`closeOnEscape`	`boolean`	Defaults to `true`. `false` ignores Escape: the key is canceled while this alert dialog is the topmost layer, and `onOpenChange` is not called for it. A cancelable close request from another source, such as the back gesture, is canceled the same way. A menu, popover, or focused toast above it still takes its own Escape. The cancel and action presses and a controlled `open` are unchanged.
`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`.

AlertDialogTrigger

Prop	Type	Notes
`children`	`AlertDialogControlElement`	One Button or Link. Receives `onClick`, `ref`, `aria-haspopup="dialog"`, and `aria-expanded`.

AlertDialogContent

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`.

The surface has 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.

AlertDialogFooter

Prop	Type	Notes
`children`	`ReactNode`	`AlertDialogCancel` then `AlertDialogAction`. They wrap on narrow dialogs.

AlertDialogCancel

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.

AlertDialogAction

Prop	Type	Notes
`children`	`AlertDialogControlElement`	One Button. Its own `onClick` runs first and performs the action; the dialog then reports a cancelable `close-press`.

Props

Name	Type	Default	Description
`children`	`ReactNode`	—	{@link AlertDialogTrigger } and {@link AlertDialogContent }, in any order.
`closeOnEscape`	`boolean`	`true`	Whether Escape closes the alert dialog. Pass `false` to keep it open on Escape: the key is canceled while this alert dialog is the topmost layer, so a menu, popover, or toast above it still takes its own Escape first, and `onOpenChange` is not called for the ignored key. A cancelable close request from another source, such as the Android back gesture, is canceled the same way. The cancel and action presses and a controlled `open` are unchanged. Chromium lets a page cancel only a limited number of close requests; one it makes non-cancelable still closes the dialog and is reported through `onOpenChange` as a non-cancelable `close-request`, so a controlled host can reopen it. The Escape key never reaches that limit.
`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}.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Alert Dialog / Usage

Alert Dialog / Accessibility

On this page

Alert Dialog

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogTrigger, AlertDialogSize from @prepared911/ui/alert-dialog.

AlertDialog

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.
`closeOnEscape`	`boolean`	Defaults to `true`. `false` ignores Escape: the key is canceled while this alert dialog is the topmost layer, and `onOpenChange` is not called for it. A cancelable close request from another source, such as the back gesture, is canceled the same way. A menu, popover, or focused toast above it still takes its own Escape. The cancel and action presses and a controlled `open` are unchanged.
`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`.

AlertDialogTrigger

Prop	Type	Notes
`children`	`AlertDialogControlElement`	One Button or Link. Receives `onClick`, `ref`, `aria-haspopup="dialog"`, and `aria-expanded`.

AlertDialogContent

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`.

AlertDialogFooter

Prop	Type	Notes
`children`	`ReactNode`	`AlertDialogCancel` then `AlertDialogAction`. They wrap on narrow dialogs.

AlertDialogCancel

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.

AlertDialogAction

Prop	Type	Notes
`children`	`AlertDialogControlElement`	One Button. Its own `onClick` runs first and performs the action; the dialog then reports a cancelable `close-press`.

Props

Name	Type	Default	Description
`children`	`ReactNode`	—	{@link AlertDialogTrigger } and {@link AlertDialogContent }, in any order.
`closeOnEscape`	`boolean`	`true`	Whether Escape closes the alert dialog. Pass `false` to keep it open on Escape: the key is canceled while this alert dialog is the topmost layer, so a menu, popover, or toast above it still takes its own Escape first, and `onOpenChange` is not called for the ignored key. A cancelable close request from another source, such as the Android back gesture, is canceled the same way. The cancel and action presses and a controlled `open` are unchanged. Chromium lets a page cancel only a limited number of close requests; one it makes non-cancelable still closes the dialog and is reported through `onOpenChange` as a non-cancelable `close-request`, so a controlled host can reopen it. The Escape key never reaches that limit.
`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}.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Alert Dialog / Usage

Alert Dialog / Accessibility

On this page