Component · controls

Liquid glass toggle

On/off toggle buttons and single-choice radios.

Also called toggle button, radio, radio group, chip, filter chip

Filter chips above a panel of selected, unselected and disabled radio options over a procedural backdrop.
Filter chips above a panel of selected, unselected and disabled radio options over a procedural backdrop. (light)
A row of filter chips with two selected, above a glass panel of selected, unselected and disabled radio options, over a zoomed night skyline and its waterline.
A row of filter chips with two selected, above a glass panel of selected, unselected and disabled radio options, over a zoomed night skyline and its waterline. (dark)

Spec

Material
lens (off) → solid accent or tint (on)
Profile
squircle
Geometry
capsule like button; radios 16–18 px circles
Bezel (px)
h/2
Displacement (px)
25
Blur (px)
0.5–1

Anatomy

  • glass capsule or small circle
  • label

States

  • off: clear glass
  • on: solid accent or tint
  • disabled: tinted flat at 45 %

Rules

  • On state must differ by colour AND weight/fill, not only rim brightness.