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 “dissolve” transition. To learn more about transitions, see Animation.
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.
Create pattern (left) and filter pattern (right)
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.
Form sheet in regular width
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.
Popover in regular width
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.