Responsive Dialog

Dialog on desktop, Drawer 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.

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 ResponsiveDialog: 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.

Anatomy

Import all parts and piece them together.

vue

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

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

API Reference

ResponsiveDialog

Prop	Type	Default	Description
`title`	`string`	`""`	Accessible name for the dialog, rendered visually hidden. Pass it even when the design has no visible heading.
`description`	`string`	`""`	Accessible description, also rendered visually hidden.
`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.
`virtualKeyboard`	`boolean`	`true`	Lift the drawer clear of the software keyboard and scroll the focused field into view. Mobile branch only; the desktop dialog ignores it.
`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.

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

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.

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.

Resizable Result