Modal dialog for confirmations, forms, and destructive alerts, with a focus trap, escape handling, and an overlay scrim.

import {
Dialog,
DialogBody,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@plexui/vue/components/Dialog";

Examples

Overview

Destructive confirmation

Scrolling body

Placement

placement

API

Dialog (root)

Prop	Type	Default	Description
`open / v-model:open`	`boolean`	—	Controlled open state; uncontrolled when omitted
`@update:open`	`(open: boolean) => void`	—	Fires when the dialog opens or closes

DialogContent

Prop	Type	Default	Description
`width`	`number \| string`	`480`	Panel width
`show-close`	`boolean`	`true`	Show close button in top-right corner
`class`	`string`	—	Additional CSS class on the panel
`placement`	`"center" \| "top" \| "bottom" \| "start" \| "end" \| "fullscreen"`	`"center"`	Where the panel sits: centered, near the top, a bottom sheet, a side panel, or the whole screen
`mobile-placement`	`"center" \| "bottom" \| "fullscreen"`	—	Placement at 640px and below; defaults to placement
`@open-auto-focus`	`(event: Event) => void`	—	Called when focus moves into the dialog on open; call event.preventDefault() to place it yourself, for example on the panel instead of the first field
`@close-auto-focus`	`(event: Event) => void`	—	Called when focus returns on close; call event.preventDefault() to keep it elsewhere

DialogTrigger: opens the dialog; renders its child element (Reka's as-child).

DialogHeader: wrapper for title and description.

DialogTitle: accessible heading for the dialog.

DialogDescription: supporting text under the title.

DialogBody: the scrolling part between the header and the footer. With it, only the body scrolls. Accepts class.

DialogFooter: footer area for action buttons.

DialogClose: closes the dialog when its child is activated.

Styling

Dialog has no component tokens of its own. It reads the shared semantic color, typography and spacing tokens listed in Design tokens, so it follows theme changes made there.

PopoverA floating panel for contextual UI, with flexible sizing, hover triggers, a controllable open state and nesting.MenuDropdown menu for structured actions with grouped items, submenus, checkbox and radio items, and horizontal layouts.TooltipBrief informative text shown on hover or focus, for any trigger element, with conditional enabling and a compact variant.ToastToast notifications for transient feedback, with semantic variants, descriptions, action buttons, promise integration, and persistent toasts.

Dialog