◇

Dialog

11 parts

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,
  DialogContentImpl,
  DialogContentModal,
  DialogContentNonModal,
} from '@robonen/primitives/dialog';

<DialogRoot>
  <DialogTrigger />
  <DialogPortal />
  <DialogOverlay />
  <DialogContent />
  <DialogTitle />
  <DialogDescription />
  <DialogClose />
  <DialogContentImpl />
  <DialogContentModal />
  <DialogContentNonModal />
</DialogRoot>

API Reference

DialogRoot

Root

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.

DialogTrigger

Trigger

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

DialogPortal

Portal

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

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

DialogContent

Content

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

DialogTitle

Title

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

DialogDescription

Description

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

DialogClose

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

DialogContentImpl

ContentImpl

Prop	Type	Default	Description
`trapFocus`?	`boolean`	—	Trap focus inside the content (modal dialogs).
`disableOutsidePointerEvents`?	`boolean`	—	Block outside pointer events (modal dialogs).
`role`?	`'dialog' \| 'alertdialog'`	—	ARIA role on the content. Defaults to 'dialog'; use 'alertdialog' for AlertDialog.

DialogContentModal

ContentModal

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

DialogContentNonModal

ContentNonModal

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