A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Use DialogClose to render a custom close button, for example in the footer.
Set showCloseButton to false to hide the default close button in the top-right corner.
The footer stays visible while long content scrolls.
Constrain the body with max-height and overflow-y-auto for long content.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Open state. Supports v-model:open. |
modal | boolean | true | Block interaction with the rest of the page while open. |
| Event | Description |
|---|---|
update:open | Fires when the dialog opens or closes. |
| Prop | Type | Default | Description |
|---|---|---|---|
showCloseButton | boolean | true | Show the ✕ button in the top-right corner. |
class | string | — | Extra classes, e.g. sm:max-w-sm for width. |
| Prop | Type | Default | Description |
|---|---|---|---|
showCloseButton | boolean | false | Render a built-in outline Close button. |
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Merge props onto the child element (e.g. a Button). |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Esc | Closes the dialog. |
| Tab | Focus is trapped inside the dialog while open. |