Dialog

Nested-safe modal or non-modal dialog behavior.

Dialog / interactiveFluid · fits available space

Semantic parts

Spread each part getter onto the matching element, then style its stable state attributes.

triggerportalbackdropviewportpopuptitledescriptionclose

Open the dialog with its button. This preview is modal and keeps Tab focus inside until dismissed.

Keys from the Clank controller contract, with preview and configuration notes. Disabled or read-only controls may prevent changes.

Escape: Close the topmost layer
Tab: Move within a trapped focus scopeWhile open in modal mode, as shown in this preview. Shift+Tab moves backward.