AlertDialog
A modal dialog that interrupts the user with important content and expects a response
Divergence from Blok
Trigger, Portal, Overlay, and Content are collapsed into a single <AlertDialog Open>. Blok exports AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, and AlertDialogContent as separate sub-components that consumers compose around the root. We bake the overlay and content into the root and drive open/close with Open/OpenChanged two-way binding — trigger the dialog from any button's Click handler. The AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel splits remain. No focus trap and no Esc-to-close (Blok gets those via Radix).
Examples
Default
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| AlertDialog | Root of the modal. Renders a fixed-position overlay plus centred content panel when Open is true. Drive open/close via @bind-Open and compose AlertDialogHeader/AlertDialogFooter inside. |
| AlertDialogHeader | Top section of the dialog. Stacks AlertDialogTitle and AlertDialogDescription vertically with centre alignment on mobile and left alignment on sm+. |
| AlertDialogFooter | Bottom section of the dialog. Reverses button order on mobile (primary on top) and right-aligns on sm+. |
| AlertDialogTitle | Heading inside the AlertDialogHeader. Renders semibold and large. |
| AlertDialogDescription | Body prose inside the AlertDialogHeader. Placed directly under the title. |
| AlertDialogAction | Primary confirm button inside the AlertDialogFooter. Renders as a Default Button with ButtonColor.Danger by default. Wire Click to your confirm handler — typically also closes the dialog. |
| AlertDialogCancel | Cancel button inside the AlertDialogFooter. Renders as a Ghost Button with ButtonColor.Neutral by default. Wire Click to close the dialog. |
AlertDialog
Root of the modal. Renders a fixed-position overlay plus centred content panel when Open is true. Drive open/close via @bind-Open and compose AlertDialogHeader/AlertDialogFooter inside.
| Property | Type | Required | Description |
|---|---|---|---|
| Open | bool | Controls visibility. The dialog renders nothing when false. Default: false. | |
| OpenChanged | EventCallback<bool> | Fires when Open changes. Supports @bind-Open. | |
| ClassName | string? | Extra CSS classes appended to the content panel. | |
| ChildContent | RenderFragment? | Dialog body. Typically AlertDialogHeader + AlertDialogFooter. |
AlertDialogHeader
Top section of the dialog. Stacks AlertDialogTitle and AlertDialogDescription vertically with centre alignment on mobile and left alignment on sm+.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the header container. | |
| ChildContent | RenderFragment? | Usually AlertDialogTitle + AlertDialogDescription. |
AlertDialogFooter
Bottom section of the dialog. Reverses button order on mobile (primary on top) and right-aligns on sm+.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the footer container. | |
| ChildContent | RenderFragment? | Usually AlertDialogCancel + AlertDialogAction. |
AlertDialogTitle
Heading inside the AlertDialogHeader. Renders semibold and large.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the title container. | |
| ChildContent | RenderFragment? | Title text or inline markup. |
AlertDialogDescription
Body prose inside the AlertDialogHeader. Placed directly under the title.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the description container. | |
| ChildContent | RenderFragment? | Description text — usually a paragraph explaining the consequences of the action. |
AlertDialogAction
Primary confirm button inside the AlertDialogFooter. Renders as a Default Button with ButtonColor.Danger by default. Wire Click to your confirm handler — typically also closes the dialog.
| Property | Type | Required | Description |
|---|---|---|---|
| Click | EventCallback | Invoked when the action button is clicked. | |
| ColorScheme | ButtonColor | Button colour. Default: ButtonColor.Danger. | |
| Size | ButtonSize | Button size. Default: ButtonSize.Default. | |
| ClassName | string? | Extra CSS classes passed through to the underlying Button. | |
| ChildContent | RenderFragment? | Button label. |
AlertDialogCancel
Cancel button inside the AlertDialogFooter. Renders as a Ghost Button with ButtonColor.Neutral by default. Wire Click to close the dialog.
| Property | Type | Required | Description |
|---|---|---|---|
| Click | EventCallback | Invoked when the cancel button is clicked. | |
| ColorScheme | ButtonColor | Button colour. Default: ButtonColor.Neutral. | |
| Size | ButtonSize | Button size. Default: ButtonSize.Default. | |
| ClassName | string? | Extra CSS classes passed through to the underlying Button. | |
| ChildContent | RenderFragment? | Button label. |