Dialog
A modal component for conveying important information or capturing user confirmation or input. Built on Base UI Dialog with focus trap, scroll lock, and Escape-to-close by default.
Preview
Design
Examples
Size
Controls the maximum width of the dialog.
| Value | Default | Description |
|---|---|---|
small | Simple confirmation dialogs (e.g. confirm/cancel) | |
medium | ✓ | General forms or information dialogs |
large | Complex forms or detailed content dialogs | |
xlarge | Dialogs with a lot of content | |
full | Full-screen dialog |
Design
Rounded
Controls the corner radius of the dialog.
| Value | Default | Description |
|---|---|---|
small | Small corner radius | |
medium | ✓ | Default corner radius |
large | Large corner radius |
Guidelines
Confirmation dialogs
Always get user confirmation for irreversible actions (delete, reset, etc.). In such cases, include a danger intent button in actions and set closeOnOverlayClick: false.
Form dialogs
Use closeOnOverlayClick: false when the dialog contains a form. This prevents users from accidentally losing their input.
Props
Props
Prop
Default
Type
open—
boolean
onOpenChange?—
(open: boolean) => void
onClose?—
() => void
size?"medium""small" | "medium" | "large" | "xlarge" | "full"
rounded?"medium""small" | "medium" | "large"
title?—
string
description?—
string
children—
ReactNode
actions?—
DialogAction[]
footer?—
ReactNode
showCloseButton?trueboolean
closeOnOverlayClick?trueboolean
closeOnEscape?trueboolean
Last updated on