Dialog Preview

A dialog is a supplemental surface that can provide helpful interactions or require someone to take an action before they can continue their task, like confirming a deletion.

Dialogs are often interruptions, so use them for important actions. If you need to give someone an update on an action they just took but that they don't need to act on, try a toast. If you need to give someone additional context that doesn't affect their current workflow, try a popover.

Properties

children

Can contain two children including {@link DialogTrigger} and {@link DialogSurface}. Alternatively can only contain {@link DialogSurface} if using trigger outside dialog, or controlling state.

defaultOpen

Default value for the uncontrolled open state of the dialog.

inertTrapFocus

Enables standard behavior according to the HTML dialog spec where the focus trap involves setting outside elements inert.

modalType

Dialog variations.

modal : When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with. The tab sequence is kept within the dialog and moving the focus outside the dialog will imply closing it. This is the default type of the component.

non-modal : When a non-modal dialog is open, the rest of the page is not dimmed out and users can interact with the rest of the page. This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.

alert : is a special type of modal dialogs that interrupts the user’s workflow to communicate an important message or ask for a decision. Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog, and it cannot be dismissed through the dimmed background or escape key.

onOpenChange

Callback fired when the component changes value from open state.

open

Controls the open state of the dialog