Updated: January 25, 2019

Modals

Intro

Modals are used to help users to focus on completing a task or reviewing critical content. For example, create and filter patterns are generally presented in modals. A modal typically slides up from the bottom of the screen and will remain open until the user has taken an action to close it. Note that in edit mode, the modal has a “disslove” transition instead. Learn more about transitions in Animation.

Compact & Regular

Compact Width

In compact width, a modal is presented as a full-screen window. To exit from a full-screen modal, the user must tap on one of the two action buttons placed in the navigation bar. The button on the left is generally a “Cancel” button which abandons the current task. The button on the right is usually used to complete the task or save the user’s progress. It’s recommended that you use language that best describes the current action—for example, use “Create” or “Add” when the user is creating a task or adding a contact. Avoid using “Done” because it may sound vague to the user.

Regular Width

Form Sheet

In regular width, modals can be displayed as form sheets, appearing in the center of the screen with a semi-transparent overlay underneath. Form sheets are used to collect data from users. In this example, the form sheet is collecting data that is needed to create a follow-up job for the maintenance worker. Users should be able to complete the task without needing extra information outside of the modal.

Tapping outside of the form sheet modal allows the user to exit the window. In this case, the task itself would not be completed, and any progress consequently would not be saved (i.e., it would function like tapping on a “Cancel” button). Once an exit action is triggered on a full-screen modal, the modal window slides downwards until it has completely exited the screen.

Popover

Popover is another type of modal used in regular width. It is often used when a user needs to complete a quick task or action, such as filtering a list. Tapping outside of the popover allows the user to dismiss the modal.

Resources