Modals

Focused overlays for forms, confirmations, destructive actions and detailed content.

Basic modal

A simple focused dialog with primary and secondary actions.

Ask for confirmation before an important but reversible action.

Use a compact form for creating or editing focused records.

Use a clear warning and destructive action for irreversible changes.

A wider dialog for reviewing complete record details without leaving the page.

External controls can open and close the same dialog state.

State: closed

A multi-step modal for guided workspace configuration.

A search-first modal for fast navigation and common actions.

A detailed task modal with status, assignee and activity.

sm, md, lg and xl dialog sizes via the size prop.

Destructive and success confirmation layouts.

Fields and footer actions for focused data entry.

Long content scrolls inside the dialog body.

size=full fills the viewport for focused work.

Right drawer page-local recipe for detailed context.

On mobile, dialogs remain easy to dismiss and fit the viewport.

Full-screen surface revealed as a focused overlay.