Dialog

Modal overlay for confirmations, short forms, or extra detail. For modals that should turn into bottom drawers on mobile, use DialogResponsive instead.

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).

DialogContent

Props

Prop	Type	Default	Description
class	string	—	Default width is sm:max-w-md. Override to go wider.

DialogTrigger / DialogClose

Props

Prop	Type	Default	Description
asChild	boolean	false	Render the child slot without the default button wrapper.

Card Dialog Responsive