Components

Modal

Overview

Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Use Modals sparingly because they interrupt user workflow.

Modals are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input, or can be used to advertise new app features. In some cases, Modals block interactions with the web page or application until being explicitly dismissed. They are can be used for lightweight creation or edit tasks and simple management tasks, or for hosting heavier temporary content.

For usage requiring a quick choice from the user, Dialog may be a more appropriate control.

Structure

Header

Include a heading within the Modal that mirrors the action or button that was clicked by the user. Headers include a close button “x” in the upper right-hand corner of the Modal.

Body

The body content within a Modal should be as minimal as possible. Components that may be used in Modals include: Form fields, Text Area, Select, and Radio Buttons.

Footer

The footer area of a Modal typically contains a set of buttons. Refer to Button guidelines for usage.

Usage

Dismissal

  • Using the “x” in the upper right-hand corner of the Modal
  • Pressing the ESC key
  • Clicking / touching outside of the Modal area

Variants

Button Type
Purpose

Informational

Transactional Modals are used to validate user decisions or to gain secondary confirmation from the user. Typically, the Modal requests either a 'yes' or 'no' response.

Success 

Modals used in this case include input areas that the user may interact with. These may include but are not limited to Forms, Dropdowns, Selectors, and Links.

Danger

When an action has harmful intentions to the user's data (delete, remove, etc.) and requires a secondary confirmation from the user. 

Created with Sketch. Are you sure you want to delete this account? All data associated with this account will be lost, including all transactions. This can not be reversed. Confirm Account Delete You are about to delete account for John Smith. Next Type DELETE below to confirm Delete account Cancel

Danger Modal Spec Export

Best Practices

Do

  • Use Modals for actionable interactions, such as needing the user to provide information or change settings.

 

  • When possible, try a non-blocking Modal before resorting to a blocking Modal.

Don't

  • Don’t overuse Modals. In some cases they can be perceived as interrupting workflow, and too many can be a bad user experience.