Modal Popups
Modal popups focus the user’s attention on a specific task by disabling interaction with the main page content until the user engages with or dismisses the popup. They are overlay elements that can contain text, form fields, small data tables, and buttons.
Overview
Unlike non-modal overlays, such as dropdown menus and overlay panels, modal popups are intentionally disruptive and should be used sparingly. Use them to break up complex workflows or to prevent or correct critical, irreversible errors, such as deleting a file or exiting an application without saving. For issues that do not require immediate user action or are reversible, use input notifications or standard notifications.
Design and Layout
Place modal popups 100px from the top of the page and center them horizontally.
Users can dismiss modal popups by clicking the tertiary button, the 'close' icon in the upper right corner, or by clicking outside the popup.
Anatomy
| Element | Description |
|---|---|
| 1. Modal Popup Container | Holds all components of the modal popup |
| 2. Header | Modal popup header text |
| 3. Close Button | Close modal button |
| 4. Body Content | Slot for body content, such as text, form fields, or small data tables |
| 5. Buttons | By default, modal popups have one tertiary and one primary button. Use the tertiary button for a “Cancel” option and the primary button for the main action, such as “Delete” or “Continue.” |
Dos and Don'ts
Do- Do use modal popups to prevent or correct critical, irreversible errors. Provide clear, concise language to describe the problem, potential consequences, and how users can resolve it.
- Do use the header to briefly describe the issue or purpose of the popup. Headers should be self-explanatory and pair well with button text. For example, if the header is a question, the buttons should offer potential answers.
Don't- Don't use modal popups if the content requires scrolling to fit. Users are more likely to accidentally dismiss the popup and lose their work if they have to scroll. Limit in-popup interactions as much as possible. If a process involves multiple steps, consider directing users to a separate page.
Don't- Don't use modal popups for tasks that require users to reference other information on the interface.
Installation
Props
No records available |
Events
No records available |
Methods
No records available |
Slots
No records available |