Refine By

Modal

  • Contents:
  • Modals are used to present content that requires the user’s immediate attention.
  • Use modals judiciously. They are interruptive and can quickly lead to a frustrating user experience.

Types

 

Alerts

Info modal

Confirmation dialog

Overlay

Image gallery

Guidelines

 

  • A modal should never be obscured by other elements or the edge of the screen.
  • A modal should remain in focus until an action is taken.

Click the prototype to interact with it

  • A modal should be launched or activated by the user.

Click the prototype to interact with it

 

  • For less urgent items, use less intrusive content modules such as accordions to reveal hidden content.
  • Avoid opening a modal from within another modal.

Click the prototype above to interact with it

  • Allow a modal to be dismissed by clicking a “close” or “cancel” button, or by using the system back button on Android.

Click the prototype to interact with it

Behavior

 

When using a transactional modal, use these guidelines to decide what button labels to use for exit/continue functionality:

 

Scenario Exit label Proceed label
Informational Close (or close icon)
Transactional – make a selection with another step to submit Cancel Done
Transactional – refreshes results on page. E.g, filtering search results Cancel Apply
Transactional – submits information to another page Cancel Primary CTA (for covering submit action). E.g, “Book”, “Search”
Transactional – returns to the previous step in a process Back Next

Accessibility

 

As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
May. 03 2017 9:26pm Initial content entry.