Dialog
A modal dialog that interrupts the user
Divergence from Blok
Trigger and Portal collapsed; built-in top-right close button. Blok exports DialogTrigger, DialogPortal, and DialogClose as separate components and renders no close button implicitly. Ours collapses trigger + portal into the root (open/close with Open/OpenChanged two-way binding), and the content area includes a hardcoded top-right ✕ button (matching Blok's default content template — verified against Blok source). DialogHeader, DialogFooter, DialogTitle, DialogDescription, and DialogClose remain as separate components for composition inside the content. No focus trap and no Esc-to-close.
Examples
Default
Sizes
This dialog uses DialogSize.Md at 50% viewport width.
This dialog uses DialogSize.Lg for a wider layout.
This dialog uses DialogSize.Xl for maximum content width.
Scrollable with Sticky Footer
1. Acceptance of Terms
By accessing and using this service, you accept and agree to be bound by the terms and provisions of this agreement. If you do not agree to abide by the above, please do not use this service.
2. Use License
Permission is granted to temporarily download one copy of the materials on this website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title.
Under this license you may not: modify or copy the materials; use the materials for any commercial purpose; attempt to decompile or reverse engineer any software contained on the website; remove any copyright or other proprietary notations from the materials; or transfer the materials to another person.
3. Disclaimer
The materials on this website are provided on an 'as is' basis. We make no warranties, expressed or implied, and hereby disclaim and negate all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property.
4. Limitations
In no event shall the company or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on the website.
5. Accuracy of Materials
The materials appearing on the website could include technical, typographical, or photographic errors. We do not warrant that any of the materials on the website are accurate, complete, or current.
6. Links
We have not reviewed all of the sites linked to this website and are not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement. Use of any such linked website is at the user's own risk.
7. Modifications
We may revise these terms of service at any time without notice. By using this website you are agreeing to be bound by the then current version of these terms of service.
8. Governing Law
These terms and conditions are governed by and construed in accordance with the laws and you irrevocably submit to the exclusive jurisdiction of the courts in that location.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Dialog | Modal container with a full-viewport overlay and a centred content surface. Open/close is driven by Open/OpenChanged; the content also renders a built-in top-right ✕ close button. |
| DialogHeader | Vertical stack of heading rows at the top of a Dialog. Centres text on mobile and left-aligns on sm: and up. |
| DialogTitle | Prominent heading inside a DialogHeader. Rendered at text-lg with semibold weight. |
| DialogDescription | Supporting copy placed under the DialogTitle. Rendered at text-sm in the muted foreground colour. |
| DialogFooter | Action row anchored to the bottom of a Dialog. Stacks vertically on mobile (reversed) and lays out horizontally from sm: up with right-aligned buttons. |
| DialogClose | Optional explicit close button for use inside dialog content. Fires Click — wire it up to set your Open binding to false. |
Dialog
Modal container with a full-viewport overlay and a centred content surface. Open/close is driven by Open/OpenChanged; the content also renders a built-in top-right ✕ close button.
| Property | Type | Required | Description |
|---|---|---|---|
| Open | bool | Whether the dialog is visible. Supports two-way binding via @bind-Open. Default: false. | |
| OpenChanged | EventCallback<bool> | Fires when the dialog is dismissed via the overlay or the built-in ✕ button. | |
| Size | DialogSize | Content width. Default: DialogSize.Md (50vw). Other values: Sm, Lg, Xl, Full. | |
| ClassName | string? | Extra CSS classes appended to the content surface. | |
| ChildContent | RenderFragment? | Dialog body — typically DialogHeader, form controls, and DialogFooter. |
DialogHeader
Vertical stack of heading rows at the top of a Dialog. Centres text on mobile and left-aligns on sm: and up.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the header container. | |
| ChildContent | RenderFragment? | Usually a DialogTitle followed by a DialogDescription. |
DialogTitle
Prominent heading inside a DialogHeader. Rendered at text-lg with semibold weight.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the title <div>. | |
| ChildContent | RenderFragment? | Title text or inline markup. |
DialogDescription
Supporting copy placed under the DialogTitle. Rendered at text-sm in the muted foreground colour.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the description <div>. | |
| ChildContent | RenderFragment? | Description content. |
DialogFooter
Action row anchored to the bottom of a Dialog. Stacks vertically on mobile (reversed) and lays out horizontally from sm: up with right-aligned buttons.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the footer container. | |
| ChildContent | RenderFragment? | Action buttons for the dialog. |
DialogClose
Optional explicit close button for use inside dialog content. Fires Click — wire it up to set your Open binding to false.
| Property | Type | Required | Description |
|---|---|---|---|
| Click | EventCallback | Invoked when the button is clicked. | |
| ClassName | string? | Extra CSS classes appended to the <button>. | |
| ChildContent | RenderFragment? | Button label. |