Home/Design system/Modal dialog

Modal dialog Design system

Keep decisions focused and closing lines easy to find.

6 checks · 2 content groups

Checklist contents

Structure and meaning Interaction and usability

Review progress

Structure and meaning

Compare information and presentation in context of use.

Clearly state the purposeUse titles and descriptions that indicate the decision or information to be processed.Open the dialog box with the keyboard, go through all the controls, then close it. Keep focus in the dialog box; on close, returns the opened node and preserves the context behind.Example The dialog box names the draft and has “Keep draft”, “Delete draft”; After canceling, focus returns to the original delete button.Distinguishing the main actionGive specific names to confirmations and cancellations; explain the consequences if the action is difficult to undo.The master node must say what it will do, especially with deletion or loss of data; Cancellation actions need to be easy to find but do not carry the same weight.Manage focus in the right placeGive focus to the dialog box, hold Tab in it and return focus to the open button when closed.Choose the initial focus according to the task: content area to read or first field to enter. When closed, returns the correct control that opened the modal.

Interaction and usability

Try the operation, change the status and continue working.

There is a clear closing lineProvide easily identifiable button closure and Escape where appropriate; Explain if you can't leave yet.Stated before Escape or background pressing may remove unsaved data; Do not use a small close position that is covered by a scroll bar or keyboard.Separated from the content behindMakes the background clear and prevents manipulation of the backend while the dialog is open.The content behind should not be clicked or accessed using the keyboard; when the modal opens, the background scroll state must be kept for rendering.Hold the operation when the screen is narrowAllow long content scrolls and make sure titles and buttons are still accessible.Test for long content and virtual keyboard; Titles, errors, and actions should be accessible on narrow screens without horizontal scrolling.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Check focus position when opening and closing

Open the dialog box with the keyboard, go through all the controls, then close it. Keep focus in the dialog box; on close, returns the opened node and preserves the context behind.

EXAMPLES