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)
  5. Content area

Properties

Container

The container holds all sheet content and is the only required element. It manages the layering, transition, and interaction behaviors across sheet types.

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

Title

The title concisely tells users what the sheet is for, such as what they're selecting, configuring, or reviewing. Clearly name the task or content in the sheet.

  • Use sentence case
  • No ending punctuation
  • Keep to 2–4 words
Example of a sheet container partially open with a list of selectable categories

Sheet handle

The sheet handle signals that the sheet can be dragged. 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.

On iOS, the handle is always visible on focus and context sheets. On Android, it appears only on context sheets.

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 only action is closing, the close button appears in the trailing position. If the sheet has a confirm or overflow action, the close button moves to 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

Context sheet

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

Examples

  • Filtering or refining a search or browse experience
  • Editing secondary settings that influence the main view
  • Viewing or editing a listing preview from an elevated surface
Example of a context sheet scrolled open to full height. The sheet contains filters for a list.

Focus sheet

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

Examples

  • Completing a form with many fields, like updating payment details
  • Making multiple supplemental decisions, like adjusting feed preferences
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.

Platforms

Android

Sheets on Android leverage presentation behaviors from the system. The close button is only visible in Context sheets when the native TalkBack accessibility feature is enabled. Focus sheets always have the leading close button.

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

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.

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.