Dialog
Modal overlay for confirmations, short forms, or extra detail. For modals that should turn into bottom drawers on mobile, use DialogResponsive instead.
Anatomy
Import all parts and piece them together.
vue
<script setup>
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
</script>
<template>
<Dialog>
<DialogTrigger />
<DialogContent>
<DialogHeader>
<DialogTitle />
<DialogDescription />
</DialogHeader>
<DialogFooter />
<DialogClose />
</DialogContent>
</Dialog>
</template>Default
Standard confirmation dialog. Trigger opens, Close dismisses.
With form
Common layout: header, body with Field and Input, footer with action buttons.
Controlled
Drive the open state externally via v-model:open. Use when the dialog is triggered by a non-button event.
API Reference
Props, events, and slots for each sub-component.
Dialog
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Open state. Supports v-model:open. |
| modal | boolean | true | Whether the dialog blocks outside interaction (focus trap and overlay click). |
Events
| Event | Description |
|---|---|
| update:open | Fires when the open state changes. Enables v-model:open. |
DialogContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Default width is sm:max-w-md. Override to go wider. |
Events
| Event | Description |
|---|---|
| escape-key-down | Fires when Escape is pressed. Call preventDefault to keep it open. |
| pointer-down-outside | Fires on a pointer press outside the content. |
| interact-outside | Fires on any outside interaction (pointer or focus). |
DialogScrollContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Variant of DialogContent that scrolls the whole dialog (overlay + content) for very tall bodies. |
Events
| Event | Description |
|---|---|
| escape-key-down | Same outside-interaction events as DialogContent. |
DialogTrigger / DialogClose
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Render the child slot without the default button wrapper. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Space | When focus is on the trigger, opens the dialog. |
| Enter | When focus is on the trigger, opens the dialog. |
| Tab | Moves focus to the next focusable element inside the dialog. |
| Shift+Tab | Moves focus to the previous focusable element. |
| Esc | Closes the dialog and returns focus to the trigger. |
- Focus is trapped within the content while open and restored to the trigger on close.
- Built on reka-ui Dialog: content is labelled by DialogTitle and described by DialogDescription via aria-labelledby / aria-describedby.
- Always include a DialogTitle (visually hidden if needed) so screen readers announce the dialog.