Modals

Components applied to focus the users’ attention to information and interactions by interrupting their current process or flow.

Modals are also referred to as:

Dialogs
Panels
Overlays

Types

Confirmation

Requires users to stop and think before continuing with their chosen action. It always allows users a way to back out of their decision by including a cancel or close button.

See the Pen Modals - Confirmation by USANA UX (@usana_ux) on CodePen.

Notification

Notifies users of the consequences of their actions. Users are not allowed to continue without confirming the message has been read.

See the Pen Modals - Notification by USANA UX (@usana_ux) on CodePen.

Guidelines

Use modals when the user must make a decision or perform a task outside of their main workflow that demands their full attention.

Anatomy

Header - The title should properly define the modal.
Body - Text or components can be included in the body content.
Close/Dismiss - You can exit the modal without submitting any information.
Call to Action - Group of buttons.
Container - This is the container that holds the entire modal's content.
Overlay - This overlay obscures the content of the page.

Sizes

Although there is no single rule for modal sizes, we recommend the following:

Mobile - 100%
Small - 320px
Default - 576px
Large & Fullscreen - 672px

Specifications

These specifications enable designers and developers to create modals that are pixel-perfect.

Use heading markup for the details that reveals content underneath.
Make sure the disclosed content comes right after the trigger that discloses it.
Use a button element as a trigger for disclosure.

Don't

Make controls focused and or activated.
Think that they can activated by voice.