Component · controls
Liquid glass button
Primary and secondary actions.
- Material
- lens (secondary) · solid accent (primary) · tint (prominent/danger variants)
- Profile
- bevel
- Bezel (px)
- h/2
- Displacement (px)
- 0.4 × bezel (7 at 36 px, 9 at 44 px)
- Blur (px)
- 0.5–1
Geometry. capsule, height 32–36 desktop / 44 touch, padding-x 16–20, radius h/2
Rules3
- One solid accent (#2B6BFF) per group; siblings are glass.
- Variants: Glass (clear), Accent (blue tint), Danger. Danger is red tint for a destructive action that opens a confirmation (a Delete or Reset row or button), and solid red only for the action that confirms it in the dialog, as that group's one solid button.
- Inside a glass overlay, an overlay's own footer or toolbar actions (a dialog's Cancel, a popover's Done, a sheet's close and confirm) are lens buttons, separate bodies with gaps; buttons in its content (a sheet's place actions, a card's links) are flat: the one solid accent and flat secondaries (the flat chip fill).
Anatomy2
- glass capsule
- flat label 14–15 px weight 600 (or icon + label, gap 6)
States5
- rest
- hover: rim +10 %
- press: scale 1.04, displacement +15 %
- focus: 2 px accent ring offset 2 px
- disabled: flat, 40 % content
Questions
What material is a liquid glass button?
Lens (secondary) · solid accent (primary) · tint (prominent/danger variants) material with a bevel edge profile, in the controls layer. Primary and secondary actions.
How big is a liquid glass button?
Capsule, height 32–36 desktop / 44 touch, padding-x 16–20, radius h/2.
What bezel, displacement and blur does it use?
Bezel h/2; displacement 0.4 × bezel (7 at 36 px, 9 at 44 px); blur 0.5–1 (px).
Which states does a liquid glass button need?
Rest; hover: rim +10 %; press: scale 1.04, displacement +15 %; focus: 2 px accent ring offset 2 px; disabled: flat, 40 % content.