Dialog

Dialogs interrupt the current flow to confirm an action, gather focused input, or present short-form detail without leaving the page.

Basic Usage

Use a trigger, content container, header, and footer to create a straightforward modal action flow.

Confirmation

Use confirmation dialogs for destructive or high-impact actions.

Scrollable Content

Constrain long content inside the dialog body so actions remain reachable.

API reference

Dialog wraps Base UI Dialog. Use the Base UI API reference for open state, focus behavior, modal behavior, portals, and detached trigger details.