Component · overlay

Liquid glass sheet

Task surface from the bottom (mobile) or side.

Also called drawer, bottom sheet, modal sheet, action sheet

A floating bottom sheet with a grabber, a title, two actions and a short body line, over a street map with a route inside a phone frame.
A floating bottom sheet with a grabber, a title, two actions and a short body line, over a street map with a route inside a phone frame. (light)
A floating bottom sheet with a grabber, a title, two actions and a short body line, over a dark street map with a route inside a phone frame.
A floating bottom sheet with a grabber, a title, two actions and a short body line, over a dark street map with a route inside a phone frame. (dark)

Spec

Material
frost
Profile
squircle
Geometry
inset from screen edges 8 px (iOS 26 floating sheet), top radius 28–36, grabber 36×5 capsule at top
Bezel (px)
28
Displacement (px)
60–70
Blur (px)
12–20

Anatomy

  • dim the world behind a modal sheet; a non-modal peek sheet (map, player) leaves it undimmed and interactive
  • frosted sheet
  • grabber
  • flat content

States

  • collapsed/peek
  • expanded (becomes more opaque)
  • dragging: follows the finger with spring

Rules

  • A modal sheet dims the world behind it; the sheet itself refracts at its rim.
  • Avoid an opaque solid panel that hides all backdrop.