Dialog
A modal overlay that focuses the user on a single task or piece of information. Supports multiple sizes, scrollable content, and a maximizable mode. Built on Radix UI Dialog.
Sizes
With Form (Default)
Scrollable Body
Maximizable
Usage
Use xs/sm for confirmations and simple messages. Use md (default-like) for forms. Use lg/xl for complex content like tables or multi-step flows.
Wrap long content in DialogBody with a max-h-* class for scrollable regions.
Use the maximizable prop for content like editors or previews where users may want full-screen space.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "md" | Width: xs=384px, sm=448px, md=512px, lg=672px, xl=896px |
| maximizable | boolean | false | Adds a maximize/restore toggle button |
| open | boolean | — | Controlled open state |
| onOpenChange | (open: boolean) => void | — | Callback when open state changes |
| modal | boolean | true | Whether the dialog is modal |