Component · overlay (modal)

Liquid glass dialog

Blocking decision or form.

Also called alert dialog, modal, alert, confirm

A frosted confirmation dialog over a dimmed, blurred dune scene, with a filled confirm field, a glass Cancel and a solid red Delete.
A frosted confirmation dialog over a dimmed, blurred dune scene, with a filled confirm field, a glass Cancel and a solid red Delete. (light)
A frosted confirmation dialog over a dimmed, blurred night-city scene, with a filled confirm field, a glass Cancel and a solid red Delete.
A frosted confirmation dialog over a dimmed, blurred night-city scene, with a filled confirm field, a glass Cancel and a solid red Delete. (dark)

Spec

Material
frost
Profile
squircle
Geometry
radius 24–28, width 320–420, padding 20–24; actions right-aligned capsules
Bezel (px)
26–28
Displacement (px)
60–75
Blur (px)
10–18

Anatomy

  • dim + blur the world (black 25 % light / 45 % dark, 2–6 px blur)
  • frosted panel
  • title 15–17 semibold, body secondary
  • inputs as flat troughs (darker fill, no optics of their own)
  • actions: glass Cancel + solid accent (or solid red for destructive)
  • corner close glyph stays flat

States

  • open: scale 0.94 → 1 + fade
  • closing

Rules

  • The rim must stay readable against the dim.
  • Destructive primary is solid red; only one solid button.