Dialog Responsive

Dialog on desktop, Drawer (vaul-vue) on mobile. Use this for almost every modal in the app. Reach for plain Dialog only for short confirmations that still look fine on a phone.

When to use DialogResponsive vs Dialog

Default to DialogResponsive for any modal that has a form or scrollable content. Plain Dialog is fine for short confirmations (delete, log out) and small popovers that read well on mobile without becoming a drawer.

Anatomy

Import all parts and piece them together.

vue

<script setup>
import {
  DialogResponsive,
} from "@/components/ui/dialog-responsive";
</script>

<template>
  <DialogResponsive>
    <template #trigger />
    <template #sticky-header />
    <template #default />
    <template #sticky-footer />
  </DialogResponsive>
</template>

Default

Use the trigger slot for the opener, the default slot for the content. Open state is controlled with v-model:open.

With form

Form pattern inside DialogResponsive: padding handled with a wrapper div, action buttons at the end.

Prevent close

preventClose blocks overlay clicks and Escape. The close-prevented event lets you show a confirmation prompt.

API Reference

Props, events, and slots for each sub-component.

DialogResponsive

Props

Prop	Type	Default	Description
open	boolean	—	Open state. Supports v-model:open.
isResponsive	boolean	true	Set false to force the Drawer variant at every breakpoint.
dialogMaxWidth	string	"400px"	Max width of the desktop dialog.
dialogMaxHeight	string	"calc(100% - 4rem)"	Max height of the desktop dialog.
preventClose	boolean	false	Block overlay click and Escape. Emits close-prevented.
drawerCloseButton	boolean	false	Show a close button on the mobile drawer (default is swipe only).
hideOverlay	boolean	false	Hide the dark backdrop.
flushContent	boolean	false	Render the content without the ScrollArea wrapper.
overflowContent	boolean	true	Enable overflow-y-auto on the mobile drawer body.

Events

Event	Description
update:open	Fires when the open state changes.
close-prevented	Fires when the user tries to close with preventClose enabled.

Slots

Slot	Description
trigger	The opener button. Receives open from the scope.
default	Main content. Receives data from the scope.
sticky-header	Header that sticks to the top while scrolling.
sticky-footer	Footer that sticks to the bottom while scrolling.

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 content.
`Shift`+`Tab`	Moves focus to the previous focusable element.
`Esc`	Closes the overlay and returns focus to the trigger.

Adapts to a Dialog on desktop and a Drawer on mobile, keeping the same accessibility contract.
Focus is trapped within the content while open and restored to the trigger on close.
Provide a title so screen readers can announce the dialog via aria-labelledby.

Dialog Drawer