Menu

Component · controls

Liquid glass toolbar

Group of related actions.

Two toolbar looks over dunes: a glass formatting strip with text-style, alignment and list groups split by hairlines and two items selected, and below it the grouped look: a round back button, a capsule of four actions and a tinted prominent check button, three separate bodies.

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once
Material
regular
Profile
bevel
Bezel (px)
18–20
Displacement (px)
0.4 × bezel (7.5–8)
Blur (px)
2–4

Geometry. two looks. Strip, when you draw one bar yourself (web, desktop format bars, custom bars): a capsule 36–44 tall, items 28–32, 1 px separators between groups, optional inset field. Grouped, as iOS 26+ draws system toolbars: 2–3 separate capsules 44 tall, 8 px apart (the platform draws 6–8; at 8 or more they read as separate bodies), the navigation group leading, the actions in the middle and one tinted prominent action alone at the trailing end; a one-icon group is a 44 circle; text items get a capsule of their own

Rules5
  • The strip is the lens; items are flat — do not frost every glyph.
  • Inset search field inside a toolbar is a darker flat trough, not a second lens.
  • A top toolbar gets the same uniform scroll-edge band as the navigation bar once content scrolls under it; items that do not fit go into one overflow (…) menu at the trailing end.
  • Separators when you draw one bar yourself; separate capsules on iOS 26+. Never both in one toolbar.
  • Grouped: text items and icon items never share a capsule; at most one tinted prominent action, alone at the trailing end; capsules stay ≥ 8 px apart or merge.
Anatomy5
  • strip: one glass capsule
  • flat icon/text buttons
  • active item solid accent or tint
  • strip: separators 1 px white 25 %
  • grouped: one capsule per group, a 44 circle for a one-icon group, the prominent action alone in tint glass with a primary-ink glyph
States4
  • rest
  • item active
  • item press
  • grouped: the prominent action and one-icon circles grow 1.05 on press

Questions

What material is a liquid glass toolbar?

Regular material with a bevel edge profile, in the controls layer. Group of related actions.

How big is a liquid glass toolbar?

Two looks. Strip, when you draw one bar yourself (web, desktop format bars, custom bars): a capsule 36–44 tall, items 28–32, 1 px separators between groups, optional inset field. Grouped, as iOS 26+ draws system toolbars: 2–3 separate capsules 44 tall, 8 px apart (the platform draws 6–8; at 8 or more they read as separate bodies), the navigation group leading, the actions in the middle and one tinted prominent action alone at the trailing end; a one-icon group is a 44 circle; text items get a capsule of their own.

What bezel, displacement and blur does it use?

Bezel 18–20; displacement 0.4 × bezel (7.5–8); blur 2–4 (px).

Which states does a liquid glass toolbar need?

Rest; item active; item press; grouped: the prominent action and one-icon circles grow 1.05 on press.