◇

Dialog

8 parts

A window overlaid on the page that interrupts the rest of the app while it is open — used for tasks like forms, confirmations, or detail views that should sit above the current context. Composed from a Trigger, a Portal, an Overlay, and Content (with Title, Description, and Close). Root manages the open state and provides context to every part. Bind v-model:open to control it, or rely on the Trigger/Close for uncontrolled use. Modal by default (traps focus, locks scroll, marks the rest of the document inert); set modal="false" for a non-blocking dialog. For destructive confirmations that demand an explicit choice, prefer AlertDialog.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  DialogRoot,
  DialogTrigger,
  DialogPortal,
  DialogOverlay,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from '@robonen/primitives/overlays/dialog';

<DialogRoot>
  <DialogTrigger />
  <DialogPortal />
  <DialogOverlay />
  <DialogContent />
  <DialogTitle />
  <DialogDescription />
  <DialogClose />
</DialogRoot>

API Reference

DialogRoot

Root

A window overlaid on the page that interrupts the rest of the app while it is open — used for tasks like forms, confirmations, or detail views that should sit above the current context. Composed from a Trigger, a Portal, an Overlay, and Content (with Title, Description, and Close). Root manages the open state and provides context to every part. Bind `v-model:open` to control it, or rely on the Trigger/Close for uncontrolled use. Modal by default (traps focus, locks scroll, marks the rest of the document inert); set `modal="false"` for a non-blocking dialog. For destructive confirmations that demand an explicit choice, prefer AlertDialog.

Prop	Type	Default	Description
`defaultOpen`?	`boolean`	—	Uncontrolled initial open state. Ignored once `v-model:open` is bound.
`modal`?	`boolean`	`true`	Modal mode traps focus inside the content, locks body scroll, and marks the rest of the document as inert.
`open`?	`boolean`	—	Two-way bound value (`v-model:open`).

Emits

Event	Payload
`update:open`	`[value: boolean]`

DialogTrigger

Trigger

The button that toggles the dialog open. Wires up `aria-haspopup`, `aria-expanded`, and `aria-controls`, and is the element focus returns to when the dialog closes.

No props or events — renders its element and forwards attributes.

DialogPortal

Portal

Teleports the Overlay and Content out of the normal DOM flow (by default into `body`) so they render above the rest of the page and escape `overflow`/ stacking contexts. Mounts its children only while the dialog is open.

Prop	Type	Default	Description
`forceMount`?	`boolean`	`false`	When true the Portal (and its descendants) remain mounted even when the dialog is closed. Consumers use this to drive exit animations via CSS.

DialogOverlay

Overlay

A full-screen layer rendered behind the Content that dims and covers the page while a modal dialog is open. Only renders in modal mode; omit it for non-modal dialogs.

Prop	Type	Default	Description
`forceMount`?	`boolean`	`false`	Keep overlay mounted even when the dialog is closed — useful for CSS exit animations.

DialogContent

Content

The dialog panel itself — the container for Title, Description, and the body. Renders only while open and picks a modal or non-modal implementation from the Root's `modal` setting: modal traps focus, locks body scroll, and hides the rest of the page from assistive tech; non-modal does none of these. Emits focus and dismissal events so consumers can guard against closing.

Prop	Type	Default	Description
`forceMount`?	`boolean`	—	Keep mounted for CSS exit animations.

DialogTitle

Title

An accessible title for the dialog. Its id is wired to the Content's `aria-labelledby`, so render one inside every dialog (visually hide it if you do not want it shown).

No props or events — renders its element and forwards attributes.

DialogDescription

Description

An optional supporting description for the dialog. Its id is wired to the Content's `aria-describedby` so screen readers announce it after the title.

No props or events — renders its element and forwards attributes.

DialogClose

A button that closes the dialog when activated. Place inside Content for an explicit dismiss control (e.g. an "X" in the corner or a "Cancel" button).

No props or events — renders its element and forwards attributes.