Intro

Modality is a design technique used to temporarily shift a user’s focus to a specific task or set of information by presenting content in a separate layer above the current view. This type of presentation often disables interaction with the underlying screen until the user completes or dismisses the modal interaction.

Modal sheet in compact width (left) and form sheet in regular width (right)

Usage

Do

Use modality to present critical information that requires acknowledgment by prompting users for decisions or inputs.

Don't

Don’t use modal overlays for routine navigation or trivial actions.

  • Keep modal tasks self-contained and interruptive only when necessary.
  • Respect platform conventions, such as swipe-down to dismiss on iPhone, and tapping outside the form sheet to dismiss on iPad.
  • Adapt the appropriate modal presentation to corresponding screen size (i.e. use form sheets or popovers on iPad instead of full-screen views when full immersion isn't needed).
  • Don’t overload alerts or modals with too many options or content.
  • Don’t use multiple modal layers unless absolutely required

Variations

Different types of components can be used to present content modally.

Alerts

Alerts help convey critical information that requires user acknowledgment. They should be reserved for delivering essential information that requires immediate attention. Alerts are usually limited to two actions, typically a default and a cancel option. Alerts block interaction with other parts of the app until dismissed. In order to dismiss, users must choose an action to proceed. Alerts are generally centered on the screen and used in both compact and regular width. See Alerts for more information.

Alert example in compact width

Action Sheets

An action sheet presents the user with a list of two or more choices related to the current context for how to proceed with a task, and is usually in response to user-initiated actions such as tapping a button. Action sheets are commonly used to provide options for how to handle a specific situation. It is a modal view that usually appears from the bottom of the screen, temporarily interrupts the app's flow, and prevents the user from interacting with the parent view until the sheet is dismissed.

Action sheet in compact width

Activity Views

Activity views enable users to share content or perform actions related to the current context, such as sharing a photo, copying a link, printing a file. This is a system-provided modal by Apple also known as share sheets. The activity view can be customized by adding custom/specific app-specific actions, hiding system-provided activities, or reordering actions for relevance.

The activity view appears as a sheet from the bottom of the screen, and blocks interaction until dismissed. It can be dismissed when the user taps “Cancel” or selects an action, which is automatically dismissed after selection. The activity view appears as a full-screen modal on iPhone (compact width), and as a popover or sheet on iPad.

Activity view in half height (left) and activity view in full height (right)

Popovers (iPad)

A popover is a transient view that is used to display additional contextual information or options related to a specific UI element. It is used only on iPads (regular width), not iPhone (compact width), and 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

Modal sheets require users to complete a task or dismiss the sheet before continuing. They are ideal for facilitated, focused tasks such as editing a form or making multi-step decisions.

Modal sheets animate upward from the bottom of the screen. They are full-screen on iPhone (compact width) and form sheet on iPad, inset and centered on the screen with a dimmed background. Modal sheets typically include a navigation bar with a “Close” or “Cancel” action and must be dismissed explicitly, for example, by tapping “Done” or “Cancel”.

Modal sheets require users to complete a task or dismiss the sheet before continuing. They are ideal for facilitated, focused tasks such as editing a form or making multi-step decisions.

Modal sheets animate upward from the bottom of the screen. They are full-screen on iPhone (compact width) and form sheet on iPad, inset and centered on the screen with a dimmed background. Modal sheets typically include a navigation bar with a “Close” or “Cancel” action and must be dismissed explicitly, for example, by tapping “Done” or “Cancel”.

Full-screen modal in

compact width

Non-Modal Sheets

Non-modal sheets are used to display additional content without blocking interaction with the rest of the app. They are commonly used for supplementary workflows, such as side panels, and popovers, where full user focus is not required.

Non-modal sheets are dismissible through background taps or gestures, and do not require the user to explicitly complete an action, unlike modal sheets.

Non-modal sheet in compact width

Resources

Related Components/Patterns: Sheets