Bottom sheet

Usage

Bottom sheets on iOS provide secondary actions or contextual content that complement the main screen content. They slide up from the bottom edge of the screen and can contain actions, lists, or form-based interactions.

Design properties

Types

Fixed list

Present a consistent set of actions or destinations.

Dynamic list

Displays lists and/or content that adapt to context or user state.

Behavior and interaction

• Bottom sheets slide upward from the screen and can be dismissed by either swiping down, tapping outside, or sometimes requiring a user action.
• They expand in a partial state and can expand to full height as needed.
• They keep underlying content visible, which reinforce the secondary function.
• Close button is always present.
• Always display a scrim behind the bottom sheet when it’s open. The scrim reduces visual competition from background content and reinforces focus on the sheet.
• The underlying content remains visible behind the scrim, emphasizing the bottom sheet’s role as secondary and contextual rather than primary UI.

Accessibility

Always provide both a grabber and a close button when possible. This ensures the sheet can be dismissed via touch gestures and explicit controls. In the case that it is not possible to display both, always include the close button.

Related components

Changelog