DialogShell
Opinionated wrapper around the Dialog primitive — hides the 5-component composition
Interactive-mode
Examples
Default
Confirm action
Are you sure you want to proceed?
This will affect 12 items.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| DialogShell | Opinionated wrapper around the Dialog primitive. Hides the 5-component composition (Dialog/DialogHeader/DialogTitle/DialogDescription/DialogFooter) behind text props for the title/description and named slots for the body and actions. The primitive Dialog has no DialogContent wrapper — DialogShell renders the Body slot directly between header and footer as a sibling. |
DialogShell
Opinionated wrapper around the Dialog primitive. Hides the 5-component composition (Dialog/DialogHeader/DialogTitle/DialogDescription/DialogFooter) behind text props for the title/description and named slots for the body and actions. The primitive Dialog has no DialogContent wrapper — DialogShell renders the Body slot directly between header and footer as a sibling.
| Property | Type | Required | Description |
|---|---|---|---|
| Title | string? | Dialog title text. Renders inside <DialogTitle> when set. Omitted from the rendered DOM when null/empty. | |
| Description | string? | Dialog description text. Renders inside <DialogDescription> when set. Omitted when null/empty. | |
| Body | RenderFragment? | Main dialog content slot. Renders directly between header and footer (no wrapper). Strict-shape slot. | |
| Actions | RenderFragment? | Footer action slot. Renders inside <DialogFooter>. Typically two Buttons (Cancel + Confirm). Strict-shape slot. | |
| Open | bool | Open state. Two-way bindable via OpenChanged. | |
| OpenChanged | EventCallback<bool> | Fires when the dialog requests to close (overlay click, close button, or Escape). Pair with Open for two-way binding. |