Icon Button

A round, icon-only action for toolbars and dense rows. It is Button's interaction recipe — the same colours, hover lift, focus halo and disabled state — on a compact circular scale (28 / 32 / 36px), because an icon control in a dense row should not be as tall as a text button; md lines up with an sm text Button. For an icon button that must match a text button's height, use Button size=icon. Always pass a tooltip so it stays labelled.

Icon only

No label — just a centered icon. The tooltip doubles as the aria-label.

Variants

Both rest in the subtle text colour and rise to emphasis on hover. default is Button's ghost; outline is Button's outline (hairline, lift on hover).

Active / emphasis — brainstorm

Softer alternatives to a solid ink circle for an active/selected control. A → F, quiet → strong. B (brand tint) matches the app's selection language; D (solid brand) is the filled option for a primary action.

A · Tonal
B · Brand tint
C · Sky
D · Solid brand
E · Ring
Current · Ink

Sizes

sm / md / lg map to 28 / 32 / 36px circles. The icon scales with the button (size-3.5 / size-4 / size-5).

Sizes — outline

The same square scale with the outline variant.