UI ComponentsOverlays
Dialog
Focused modal content with an accessible title and dismissal controls.
Import
import { Dialog } from "@puzzle-ui/ui";Title, description, and footer
Dialog is controlled. Supply a title, update open from onOpenChange, and provide explicit footer actions when needed. This example portals into the host page.
API
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | Required | Controlled visibility. |
onOpenChange | (open: boolean) => void | Required | State-change request. |
title | ReactNode | Required | Accessible heading. |
description | string | - | Associated short description. |
children, footer | ReactNode | - | Body and footer content. |
size | "sm" | "md" | "lg" | "xl" | "full" | "md" | Width preset. |
closeButton | boolean | true | Show the close button. |
closeLabel | string | "Close dialog" | Close button accessible name. |
closeOnBackdrop, closeOnEscape | boolean | true | Enable dismissal mechanisms. |
onClose | () => void | - | Called when dismissal is requested. |
aria-describedby | string | - | Additional description IDs. |
Supported div attributes, classes, and styles apply to the dialog content. The component provides modal semantics, focus management, scroll locking, and portal placement. Keep an accessible close action if disabling built-in dismissal. Use headings in a logical order within the body.