Component · overlay

Liquid glass toast

Transient feedback.

Also called notification, snackbar

Two stacked notification cards at the lower right, with a solid trigger button at the top left, over zoomed desert ridges.
Two stacked notification cards at the lower right, with a solid trigger button at the top left, over zoomed desert ridges. (light)
Two stacked notification cards at the lower right, with a solid trigger button at the top left, over a zoomed night skyline and its waterline.
Two stacked notification cards at the lower right, with a solid trigger button at the top left, over a zoomed night skyline and its waterline. (dark)

Spec

Material
regular
Profile
squircle
Geometry
capsule or 16-radius card 48–64 tall, width 280–360; column with 8 px gaps
Bezel (px)
18–20
Displacement (px)
35
Blur (px)
3–8

Anatomy

  • glass body
  • flat title + secondary line
  • flat close ×
  • optional small action

States

  • enter (slide + scale from 0.96)
  • rest
  • swipe to dismiss

Rules

  • A stack is a lens on a lens: lay toasts out in a column, never overlapping.
  • Everything inside the toast is flat.