Alert Dialog
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Basic
A simple alert dialog with a destructive action.
Confirmation
Use for confirming non-destructive actions.
Warning
Alert the user about potentially dangerous actions.
Controlled State
Control the open state programmatically with the bind-Open parameter.
Dialog is: Closed
Information
Display important information that requires acknowledgment.
Accessibility & Behavior
Alert dialogs trap focus and require user acknowledgement. By default they cannot be dismissed by clicking outside (customizable via CloseOnClickOutside), can be closed with Escape (customizable via CloseOnEscape), trap focus within the dialog, use role="alertdialog" for screen readers, and are best used for destructive or critical confirmations.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Open | bool | false | Controls whether the dialog is open. |
| CloseOnClickOutside | bool | false | When true, clicking outside the dialog closes it. |
| CloseOnEscape | bool | true | When true, pressing Escape closes the dialog. |
| ChildContent | RenderFragment? | — | Content of the alert dialog. Nest AlertDialogTrigger and AlertDialogContent here. |