Dialog

Demo

Usage

Import the parts you need from the component's folder.

ts

import {
  Dialog,
  DialogTrigger,
  DialogPortal,
  DialogContent,
  DialogClose,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogOverlay,
  DialogScrollContent,
} from "@/components/ui/dialog";

Close Button

Use DialogClose to render a custom close button, for example in the footer.

No Close Button

Set showCloseButton to false to hide the default close button in the top-right corner.

Sticky Footer

The footer stays visible while long content scrolls.

Scrollable Content

Constrain the body with max-height and overflow-y-auto for long content.

API Reference

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.

DialogContent

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.

DialogFooter

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`false`	Render a built-in outline Close button.

DialogTrigger / DialogClose

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto the child element (e.g. a Button).

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Esc`	Closes the dialog.
`Tab`	Focus is trapped inside the dialog while open.