Default
Keep the task focused
The opener launches a native modal Dialog. Focus enters the first relevant field and returns to the opener after dismissal.
Destructive confirmation
Name the consequence clearly
Use a compact Dialog for a short decision. Keep initial focus on the safe secondary action.
Sizes
Match width to task complexity
Small supports confirmation, default supports short forms, and large supports structured review content.
Content overflow
Keep title and actions stable
The body scrolls independently when content grows beyond the available viewport height.
Lifecycle
Restore the previous context
The initializer connects open and close controls, emits lifecycle events, and removes only its own listeners during cleanup.
Initialize
const cleanup = initDialogs(root)Observe
nds:dialog-open / closeRemove
cleanup()Usage guidance
Use a modal only for a focused interruption.
Keep longer workflows on a page. Avoid nested Dialogs and never hide essential information behind a modal.
Next component: Popover and Menu