Button

A lens shaped like a button, with a press that answers.

LiquidGlassButton is one lens around an icon-and-label row. Because it refracts what is behind it, it has the lens's requirement: on Skia and the web it needs an ancestor LiquidGlassView — without one it degrades to a frosted pill. On Impeller it works anywhere.

Dart

LiquidGlassButton(
  label: 'Continue',
  icon: Icons.arrow_forward_rounded,
  width: 220,
  touch: const LiquidGlassTouch(flex: LiquidGlassFlex.subtle()),
  onPressed: () => next(),
)

Parameter	Default	What it does
`label`	`null`	Button text. Ignored when `child` is set.
`icon`	`null`	Leading icon.
`onPressed`	`null`	Null disables the button — it dims and stops taking a press.
`width` / `height`	`null` / `48`	Size. Null width hugs the content.
`child`	`null`	Replaces the icon-and-label row entirely — an avatar, two lines of text, an `SvgPicture`, a badge row. It never sizes the button.
`touch`	`null`	Give it one and the glass gives under a press.
`style`	`null`	Shape, tint, refraction.
`foregroundColor`, `fontSize`, `fontWeight`, `iconSize`	`null`, `16`, `w600`, `20`	The label row, without reaching for a theme.

Your own content#

Pass a child and it replaces the row. It is centred inside the button's padding and clipped to the glass shape, and the button stays on its width/height so the lens geometry holds. A bare Icon or Text inside it inherits foregroundColor, fontSize, fontWeight and iconSize, so it matches the built-in row by default.

Dart

LiquidGlassButton(
  width: 260,
  height: 62,
  onPressed: () => switchAccount(),
  child: myAvatarRow,
)

Comments

Comments are GitHub Discussions — reply from either place.