IconButton

28 October 2026

Added

• First version: a square or round (shape) icon button on the Button recipe.
• Required label: names the button as aria-label; the icon carries aria-hidden.
• variant (default tertiary), tone, size, loading, disabled, focusableWhenDisabled.
• Press motion motion.press; colours from the color-action-* tokens.
• The data-component="icon-button" attribute.
• tooltip (default true) and tooltipSide: label also shows in a Tooltip.
• size="xs": a 24 px square for in-cell actions.
• variant="glass", with the clear glass inside a dark data-backdrop.

Changed

• The square box is 32, 36 or 40 px; corner radius is 10 px.
• Focus shows as a 2 px outer focus outline with a 2 px gap (focus-outline).

Fixed

• With both loading and disabled, loading wins: the button stays focusable and has aria-disabled.