Design system Pickers and overlays

Bottom sheet

A mobile-only modal surface that rises from the lower edge, covers the tab bar while open, and holds task-specific content without defining it.

.mk-sheet

Overview

The bottom sheet is a mobile-only modal surface that rises from the lower edge. It temporarily owns the screen: the page is dimmed and the tab bar is covered until the sheet closes. The sheet defines the surface and its behaviour, not the product content placed inside it.

Usage

  • Host a focused task on mobileUse a bottom sheet for temporary detail, selection, or a short form that should preserve the page beneath it.
  • Use for screen-level contentThe sheet belongs to the current screen rather than to one field or trigger edge. Use an attached menu or dropdown for compact anchored choices.
  • Treat the open sheet as modalThe scrim, page, and tab bar remain unavailable until the user completes or dismisses the sheet; focus stays inside the sheet while open.

Anatomy

2 1 3
4 5
  1. 1Drag handle. A quiet visual cue at the centre of the leading edge. It does not replace the close control.
  2. 2Title. Names the surface or task in a short, neutral phrase.
  3. 3Close control. A named icon button that dismisses the modal surface.
  4. 4Content region. A flexible, internally scrolling area. Lists, details, forms, or selection controls may be composed here.
  5. 5Surface. A white panel attached to the lower viewport edge; its top corners distinguish it from the dimmed page.

The scrim belongs to the modal contract outside the white surface. It covers the complete page, including the tab bar beneath the sheet.

Variants and states

StateSpecimenWhat changes
Closed
The sheet and scrim are absent. The page and its tab bar are available.
Open
The sheet covers the tab bar and traps focus; the scrim makes the page behind unavailable.
Tall
.mk-sheet-tall leaves only a small page cue above a longer task. It still covers the tab bar.

Content patterns

The sheet may host different jobs; those jobs do not become sheet variants.

  • DetailsRead-only facts or a compact summary, composed from existing text and list components.
  • SelectionA short choice task composed from Menu option rows, Checkbox, or Radio button.
  • FormA focused set of inputs with a clear completion action. Longer workflows should become a page.

Do and don't

Do

Let the modal surface cover the lower navigation and make one focused layer.

Don't

Leave the tab bar visible or tappable beneath an open modal sheet.

Copy

  • Title the task or contentUse a short noun phrase; do not name the implementation pattern itself.
  • Keep examples genericThe component specification shows structure. Product screens supply the specific records and decisions.
  • Name the close controlUse “Close” plus the surface or task when needed for an unambiguous accessible name.

Responsive

  • Mobile onlyThe bottom sheet belongs to compact viewports. Desktop uses an appropriate dialog, popover, or side panel.
  • Short and tall heightsPrefer content height for a brief task; use .mk-sheet-tall when the content needs sustained scrolling or form work.
  • No horizontal scrollContent reflows within the sheet width; only the body may scroll vertically.

Accessibility

  • Modal dialog semanticsUse role="dialog", aria-modal="true", and a visible labelled title.
  • Move and contain focusFocus enters on open, remains inside while open, and returns to the invoking control after close.
  • Several clear exitsThe named close button, Escape, and—when dismissal is safe—the scrim all close the sheet.
  • Background is unavailableThe page and tab bar beneath the modal are not focusable or pressable while it is open.

When to reach for something else

  • Choices attached to a field or buttonUse an attached Menu; type-to-find choices belong to Search.
  • A long multi-step workflowUse a dedicated page so history, navigation, and recovery remain clear.
  • A desktop taskUse the desktop overlay or panel pattern appropriate to that task.

Markup

<button class="mk-sheet-scrim" type="button" hidden aria-label="Close bottom sheet"></button>
<section class="mk-sheet" role="dialog" aria-modal="true"
         aria-labelledby="sheet-title" hidden>
  <span class="mk-sheet-handle" aria-hidden="true"></span>
  <header class="mk-sheet-head">
    <h2 class="mk-sheet-title" id="sheet-title">Sheet title</h2>
    <button class="mk-icon-btn mk-sheet-close" type="button"
            aria-label="Close bottom sheet">…</button>
  </header>
  <div class="mk-sheet-body">…</div>
</section>