Components

Toggle

A two-state button that stays pressed and turns a setting on or off.

28 October 2026

Added

First version: a two-state button that stays pressed, on Base UI Toggle.
icon, children, a required label (icon-only), variant (tertiary, secondary), size.
Controlled (pressed, onPressedChange) and uncontrolled (defaultPressed) use.
Pressed state with a color-surface-selected fill and a color-border-selected border.
Press motion motion.press; data-component="toggle".

Changed

Heights are 32, 36 and 40 px; the default md is 36 px, 40 px on a touch screen. Corner radius is 10 px.
Focus shows as a 2 px outer focus outline with a 2 px gap (focus-outline).