Skip to main contenteBay Playbook

Sheets

Sheets provide a consistent, adaptive, and accessible way to present content above the primary surface.

Stylized graphic of a set of sheets.

Anatomy

Anatomy of a sheet pointing out the 1 sheet container, 2 title, 3 sheet handle, and 4 sheet toolbar container.
  1. Container
  2. Title (optional)
  3. Sheet handle (optional)
  4. Sheet toolbar (optional)

Properties

Container

The sheet container is the elevated surface bounding all of the sheet content and the only required element. The container handles the layering, transition, and interaction behaviors across sheet types.

Example of a sheet container partially open with a list of selectable categories

Sheet handle

The sheet handle acts as an affordance for the dragging behavior. Swiping upward expands sheets with overflowing content and swiping downward dismisses the sheet.

Sheets with defined heights will rest at the closest height to the dragged container. Tapping the handle toggles the sheet between defined heights.

The handle is always visible on iOS across focus and context sheets. The handle is only visible in context sheets on Android devices.

Example of interacting with the sheet handle at the top of the sheet container

Sheet toolbar

The sheet toolbar is built around the Top Navigation Bar and appears at the top of the sheet container. It contains the title, subtitle, close button, and an optional confirmation button.

If the primary action is to close the sheet, the close button appears as a trailing action. If the sheet has a confirm or overflow action, the close button appears in the leading position and the other actions appear in the trailing position.

iOS uses icon buttons by default for all actions. Android uses a CTA button as the confirm action by default.

Multiple sheet toolbars. Top: title only. Middle: title and close button. Bottom: leading close button, title, and trailing confirmation button.

Height

Context sheets open partially by default and expand to full height as the content is scrolled. The content area scroll begins when the sheet reaches full height.

Focus sheets are always full height on small screens.

Two examples of sheets open to different heights. The left example shows a partially-open sheet covering the bottom half of the screen. The right example shows the fully-opened sheet covering the screen

Scrim

Sheets use a scrim to darken and block interaction with the primary page content, focusing users on the sheet’s task or information.

Example of a modal and non-modal sheet over a map. The scrim is visible on the left half of the screen and not visible on the right half.

Toolbar visibility

The sheet toolbar can be hidden for quick, simple decisions, like selecting a value from a list or when using a hero image at the top of the sheet. When hiding the toolbar, an accessible title must still be provided for screen readers and TalkBack services.

Two examples of sheet top toolbars: The left example shows a standard toolbar with a title and the right example shows a transparent toolbar with a hero image above the title and extending below the toolbar.

Interactive dismiss

Interactive dismiss is enabled by default, allowing the sheet to be dismissed using a downward swiping gesture.

If selections within the sheet don’t automatically apply, dismissing via swiping down is the same as canceling or closing the sheet.

Interactive dismiss can be disabled when the sheet contains decisions users may want saved. The sheet presents a confirmation dialog when attempting to drag the sheet away.

Example of an iOS context sheet presenting a popover from the sheet's close button. The popover warns that there are unsaved changes that will be lost and has a button that discards the unsaved changes.

Types

Focus sheet

Focus sheets are blocking, scoped surfaces for contained interactions related to the primary surface.

An example of a focus sheet open on Android titled "Place bid". The sheet covers the entire screen and presents an text field for entering a maximum bid price.

Context sheet

Context sheets are flexible, medium-attention surfaces for displaying relevant information above the primary surface.

Example of a context sheet scrolled open to full height. The sheet contains filters for a list.

Platforms

Sheets present and behave differently across platforms.

Android

Sheets on Android leverage presentation behaviors from the Material Sheet or Fullscreen Dialog. The close button is only visible when the native TalkBack accessibility feature is enabled.

Avoid placing a back button in the sheet header—Android devices use the hardware back or predictive back gesture actions.

Read more about Material Dialogs and Sheets

Example of a focus sheet on Android covering the entire screen with no visible stack of sheets behind. The content area presents options for clothing preferences.

iOS

Sheets on iOS leverage presentation behavior from the native formSheet and pageSheet elements.

Read more about iOS sheets

Example of a sheet on iOS expressing iOS-specific styling to the modal stack and sheet corner radius. The content area presents options for clothing preferences.