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 appears at the top of the sheet container and contains the title, close button, and optional confirmation button.

If the primary action is to close the sheet, the close button appears as a trailing action. If the sheet has an affirmative action, the close button can appear in the leading position and the affirmative action appears in the trailing position.

iOS uses icon buttons by default for all actions. Android uses a CTA button as the affirmative 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 by default to darken and block interaction with the primary page, focusing users on the sheet task or information.

The scrim is optional for context sheets. Omit the scrim to allow interactions between the sheet and primary page surfaces simultaneously, useful in map or preview experiences where users are commonly referring to both surfaces.

Focus sheets require the scrim at all times.

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 is optional and visible by default. The toolbar includes space for a title and close button where applicable.

The included toolbar can be toggled off to allow for more expressive, full-bleed imagery.

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 (iOS only)

For iOS sheets, 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 sheets contain decisions users may want saved. The sheet presents a confirmation alert dialog instead when attempting to dismiss via a swiping gesture.

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.

Change log

VersionDateNotes
3.0Sep, 2025
  • Initial release
  • Consolidates the shared primitive sheet element