Modals

Modals are a type of dialog that overlays the entire window and prevents the user from performing any other actions until they complete the activity in the modal window.

This pattern is purposely disruptive to the user flow, and therefore should be used when it’s essential to pause the flow or present a substantial amount of information only.

Examples:

• System or alert modal, i.e., “Delete report? This action is irreversible.”
• Allow the user to complete a task while they are in the middle of another process flow.

Specifications

Modals sit within our standard 12-column grid. There are three sizes available to fit different needs.

Small | 4 columns of page grid (33%)

Example uses: login flows, product tours

Default | 6 or 8 columns of page grid (50% or 75%)

Default sizing should be used in most instances. Examples: confirmation messaging, like confirmation messaging and alerting the user to critical information.

Large | 10 columns of page grid (83.333%)

Large modals are mostly used for sharing a large amount of text, like in a Terms & Conditions agreement.

Styles

Scrollable Modal

Contingent on the length of content, a scroll bar will be visible within a modal. Such UI is present mainly in modals that include lengthy documentation. However, content of any kind is placed in the content area.