Modal Dialogs capture full attention to isolate a task, decision, or information display while preserving page context. 
Because they interrupt flow and block interaction, use them sparingly with concise, purposeful content.

The modal dialog is a focused container that interrupts the current flow to present information or require input, structured into three optional slots: a header to establish context, a body for the main content, and an actions container for task-specific controls.

Body height adapts to content with a max-height of 100vh (minus customizable insets) that reduces to 95vh below the 650px breakpoint.

When the content exceeds this limit, the body becomes scrollable. If an actions container is present in this state, a divider is automatically rendered between the body and the actions container to maintain clear separation.

The modal offers four predefined size options: small (400px), medium (560px), large (720px), and x-large (100vw minus inset).

All modal sizes adapt to the viewport width, constrained by an inset (customizable), ensuring the dialog maintains spacing from screen edges.

For viewports ≥650px, the component renders as a centered dialog modal. For viewports <650px, it renders as a bottom sheet. In bottom sheet mode, the component spans 100% of the viewport width with a maximum width constraint of 560px.

When dismissible is set to false the modal dialog cannot be closed without user action. It renders no close button or drag handle, ignores scrim clicks, and blocks the Escape key, forcing resolution through explicit actions only.

By default, the Modal Dialog inherits the light mode environment and appears in light styling. Its appearance can be explicitly set to dark if required.