AlertDialog
A modal dialog that interrupts the user with important content and expects a response.
AlertDialog#
Contains all the parts of an alert dialog.
| Attribute | Type | Description | Default |
| open | boolean | - | null |
| defaultOpen | boolean | - | null |
| onOpenChange | (open: boolean) => void | - | null |
AlertDialog.Trigger#
A button that opens the dialog.
| Attribute | Type | Description | Default |
| asChild | boolean | - | null |
AlertDialog.Portal#
When used, portals your overlay and content parts into the body.
| Attribute | Type | Description | Default |
| forceMount | true | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | null |
| container | HTMLElement | - | null |
AlertDialog.Overlay#
A layer that covers the inert portion of the view when the dialog is open.
| Attribute | Type | Description | Default |
| forceMount | true | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | null |
| asChild | boolean | - | null |
AlertDialog.Content#
Contains content to be rendered when the dialog is open.
| Attribute | Type | Description | Default |
| asChild | boolean | - | null |
| size | "sm" | "md" | "lg" | "fullscreen" | - | null |
| onEscapeKeyDown | (event: KeyboardEvent) => void | Event handler called when the escape key is down. Can be prevented. | null |
| onFocusOutside | (event: FocusOutsideEvent) => void | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. | null |
| onOpenAutoFocus | (event: Event) => void | Event handler called when auto-focusing on open. Can be prevented. | null |
| onCloseAutoFocus | (event: Event) => void | Event handler called when auto-focusing on close. Can be prevented. | null |
| forceMount | true | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | null |
AlertDialog.Header#
To use inside of AlertDialog.Content. Sticky header inside the dialog.
| Attribute | Type | Description | Default |
| className | string | - | null |
AlertDialog.Body#
To use inside of AlertDialog.Content. Main content of the dialog. Becomes scrollable when content is overflowing the screen.
| Attribute | Type | Description | Default |
| className | string | - | null |
AlertDialog.Footer#
To use inside of AlertDialog.Content. Sticky footer to be rendered in the open dialog. Use it to render CTAs and make them accessible in every condition.
| Attribute | Type | Description | Default |
| className | string | - | null |
AlertDialog.Title#
An accessible name to be announced when the dialog is opened.
| Attribute | Type | Description | Default |
| asChild | boolean | - | null |
AlertDialog.Description#
An accessible description to be announced when the dialog is opened.
| Attribute | Type | Description | Default |
| asChild | boolean | - | null |
AlertDialog.Cancel#
A button that closes the dialog. This button should be distinguished visually from AlertDialog.Action buttons.
| Attribute | Type | Description | Default |
| asChild | boolean | - | null |
AlertDialog.Action#
A button that closes the dialog. These buttons should be distinguished visually from the AlertDialog.Cancel button.
| Attribute | Type | Description | Default |
| asChild | boolean | - | null |