Component · controls

Liquid glass tabs

Switch between views or modes.

Also called segmented control, segmented, segment

Segmented date-range and appearance controls with inset selected pills over a procedural backdrop.
Segmented date-range and appearance controls with inset selected pills over a procedural backdrop. (light)
Segmented date-range and appearance controls with inset selected pills over a procedural backdrop.
Segmented date-range and appearance controls with inset selected pills over a procedural backdrop. (dark)

Spec

Material
track: regular glass capsule · indicator: raised lens pill (or tint)
Profile
squircle
Geometry
track 32–36 tall capsule, inset 3; indicator radius = track radius − 3
Bezel (px)
track 14–16 · indicator h/2
Displacement (px)
track 20–25 · indicator 0.9–1.3 × its bezel
Blur (px)
1–2

Anatomy

  • track
  • sliding indicator
  • flat labels

States

  • rest
  • moving: indicator slides with a spring and stretches (morph) toward the target
  • selected label weight 600

Rules

  • The indicator is the travelling lens; the track stays calm.
  • Keep labels flat above both.