Dialog
Modal dialog for confirmations, forms, and destructive alerts, with a focus trap, escape handling, and an overlay scrim.
import { Dialog } from "@plexui/ui/components/Dialog";Examples
Overview
Destructive confirmation
Scrolling body
Placement
API
Dialog (root)
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state; uncontrolled when omitted |
onOpenChange | (open: boolean) => void | — | Called when the dialog opens or closes |
Dialog.Content
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | string | 480 | Panel width |
showClose | boolean | true | Show close button in top-right corner |
className | 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 |
mobilePlacement | "center" | "bottom" | "fullscreen" | — | Placement at 640px and below; defaults to placement |
onOpenAutoFocus | (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 |
onCloseAutoFocus | (event: Event) => void | — | Called when focus returns on close; call event.preventDefault() to keep it elsewhere |
Dialog.Trigger: opens the dialog; renders its child element (Radix asChild).
Dialog.Header: wrapper for title and description.
Dialog.Title: accessible heading for the dialog.
Dialog.Description: supporting text under the title.
Dialog.Body: the scrolling part between the header and the footer. With it, only the body scrolls. Accepts className.
Dialog.Footer: footer area for action buttons.
Dialog.Close: 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.