Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.
Modals are used to present critical information or request user input needed to complete a user’s workflow. Modals interrupt a user’s workflow by design. When active, a user is blocked from the on-page content and cannot return to their previous workflow until the modal task is completed or the user dismisses the modal. While effective when used correctly, modals should be used sparingly to limit disruption to the user.
When to use
- Use a modal to request information that is preventing the system from continuing a user-initiated process.
- Use a modal to notify the user of urgent information concerning their current work. Modal are commonly used to report system errors or convey a consequence of a user’s action.
- Use a modal to confirm user decisions. Clearly describe the action being confirmed and explain any potential consequences that it may cause. Both the title and the button should reflect the action that will occur. If the action is destructive or irreversible then use a danger action.
- Leading Icon: Supports the modal message visually.
- Modal details: Group of title and description which conveys the modal's context and information.
- Dismiss Icon: Optionally lets users dismiss the modal.
- Actions: Adds necessary actions that the user can take.
- Do not use modals to show error, wait, or success states.
- Make a dismiss control visible.
- Put a modal window in a focus.
- Never use nested modals.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.