Components

Modal

What

A modal is a window that removes the user's ability to access the main part of the page.

Why

To focus the user's attention on specific information or tasks without having to navigate somewhere else in the app

Where

Typically a pop-up window, centered and floating above the page, but sometimes covering the entire screen.

Best Practices

Never stack modals (a pop-up within a pop-up).
Tasks should be easy to complete without consulting the underlying page or another part of the app.
Users should be able to click outside of modal window to close (if it’s not covering the entire page).
A drop shadow is used to make the window stand out from the rest of the page..
When the modal is closed the user should see the screen that was beneath the modal.
Mobile: May be entire screen on mobile. Shouldn’t be longer than the length of the screen on mobile if not full screen. Otherwise, there may be scrolling problems.

Related Principles

Design Systems

A design system is a set of design standards for a company or a specific project. The primary elements of a design system are: color & text styles, icons & illustrations, and commonly used components. It can also include things like code standards, layout...

UX/UI Design Glossary

Chrome Visual elements that provide users information about or commands to use the screen's content. Chrome is not part of the content itself. Examples would be buttons, labels, and menus. Edge Case An uncommon situation when a user's experience falls outside the...