Updated: June 10, 2019

Modals

Intro

A modal is used for completing a task, updating content, or selecting filters. It helps the user to focus on the current task by providing relevant properties. The create pattern and filter pattern is 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. To learn more about transitions, see Animation.

Compact

Full Screen Modal

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

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 information needed to create a follow-up job for the maintenance worker. Users should be able to complete the task without referring to 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.

Full Screen Modal

A full screen modal can also be used in regular width. Readable width should be applied to components in a full screen modal as it may be difficult for the users to read across a wide screen. It is best used for tasks that are complex and require the user’s full attention.

Resources