Dialog
A modal dialog component that interrupts the user with important content and expects a response.
Basic Usage
Basic Dialog
A simple dialog with a trigger button.
Sizes
Dialog Sizes
Available sizes: sm, md, lg (default), xl, 2xl, 3xl, 4xl, 5xl, full-width.
With Form
Dialog with Form
Dialogs can contain forms for user input.
Without Close Button
No Close Button
Hide the default close button with showCloseButton=false.
API Reference
DialogContent
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full-width" | "lg" | Maximum width of the dialog |
showCloseButton | boolean | true | Show the X close button |
class | string | - | Additional CSS classes |
Dialog
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controlled open state |
onOpenChange | (open: boolean) => void | - | Callback when open state changes |