Component · controls

Liquid glass icon button

Single-icon actions: undo/redo chips, floating action, search button next to a tab bar.

Also called fab, round button, circle button

Round icon buttons and shorter capsule variants, including a selected heart over a procedural backdrop.
Round icon buttons and shorter capsule variants, including a selected heart over a procedural backdrop. (light)
Round icon buttons and shorter capsule variants, including a selected heart over a procedural backdrop.
Round icon buttons and shorter capsule variants, including a selected heart over a procedural backdrop. (dark)

Spec

Material
lens
Profile
convex (circle) or squircle (capsule chip)
Geometry
circle 32–44 (touch 44), or capsule chip 28–32 tall × 40–48 wide; icon 16–20. A search or action lens beside a floating bar takes the bar's height (56–64), as the tab-bar spec says
Bezel (px)
radius
Displacement (px)
≤ 0.5 × radius
Blur (px)
0–1

Anatomy

  • glass circle/capsule
  • flat centred glyph

States

  • rest
  • press: grow 1.06 + brighter glow
  • active: tint

Rules

  • Space siblings ≥ 8 px so they read as separate lenses (or deliberately merge them with morph).
  • Tooltips open 6–8 px above, never overlapping the button.