UI Terms visual dictionary

Animations

Modal presentation

A transition where a new view slides up over the current view to present a self-contained task.

Share with
Team
Design
Engineering

Modal presentations imply 'pause your current task and complete this one before returning'. iOS sheets slide up from the bottom; web modals fade in over a scrim. The motion is perpendicular to a push transition — push goes sideways through a hierarchy, modal comes from below as an interruption. The user dismisses with a swipe down, a close button, or Escape.

Also called

modal slide-upsheet presentation

When to use

  • Self-contained tasks that interrupt the main flow (compose new message, create record)
  • Forms that should feel temporary and dismissable
  • Confirmations and destructive-action prompts

When not to use

  • Navigation between peer views (modals stack badly when used as navigation)
  • Critical errors that need acknowledgement, not dismissal (use an alert)

Source

Apple HIG ('Modal presentation'); supported on iOS via UISheetPresentationController and on Android/web via similar conventions.

Read the W3C ARIA pattern →