Modals & Views
Modals
Modals, also known as "dialog boxes" or "pop-ups" are a disruptive and highly visible way of presenting information and decisions to the user without navigating to a different page or URL. See the Structured Modal component for more details.
When to Use Modals
Modals may be used for:
- ✅Confirming a potentially damaging or irreversible action
e.g. deleting a data source.
- ✅Preventing data loss
e.g. confirming page edits before navigating away.
- ✅Communicating significant errors
e.g. connection failure
- ✅Displaying user-initiated information or flows
This may be to avoid a full new page load or when inline interactions are impractical.
e.g. showing user role permission details; entering deprecation details.
- ✅Informing users of significant changes or updates
e.g. new release feature updates
Modals should not be used for:
- ❌Confirmation of insignificant or undo-able actions
e.g. removing a tag
- ❌Communicating errors that the user has no ability to change
e.g. "You don't have permission to do that!"
Types of Modals
- Standard modals — see UIStructuredModal for more detailed component information.
- Full-screen modals — see "Full Screen Overlays" section below.
Closing Modals
There must be a clear way for users to dismiss a modal and return to the previous screen. Some modals may be dismissed by clicking on the background shader outside of the modal bounds, but only if the information is not severe and does not require action.
For most modals, the primary action should be "Close." See details about action areas in the Links & Actions guidelines.
Full-Screen Overlays
Full-screen overlays are much like modals, except that they entirely (or almost entirely) fill the browser window.
These overlays should only be used in select circumstances: both where it is impractical or undesirable to navigate to a new page, and also where the content is large and best viewed in full-screen environment.
Examples in Alation include:
- Pivot Tables
- Lineage
Closing Full-Screen Overlays
Full-screen overlays should follow the same dismissal guidelines as modals.
Partial Overlays
When a modal would be too disruptive to present the desired information then a partial overlay may be used.
Examples of partial overlays:
Partial overlays are much more flexible and less disruptive than modals. Only content that is not reasonably suited for a partial overlay should be placed in a modal.
Opening & Closing Partial Overlays
Partial overlays may be triggered by clicking or hovering on another element, or based on other behavioral factors such as page loads or dwell time.