Components

Toggle

Toggles represent a binary pressed or unpressed state and are especially useful in formatting toolbars and compact setting controls.

Basic Usage

A single toggle works well for compact on or off actions with a clear visual pressed state.

Variants

Use visual variants to fit the same interaction into different toolbar hierarchies.

Sizes

Size changes help the same toggle fit both dense and prominent control rows.

Pressed

Pressed examples make it clear how the control should behave when selected.

Disabled

Disabled examples show how the control should read when unavailable.

API reference

Toggle wraps Base UI Toggle. Use the Base UI API reference for pressed state, controlled state, disabled behavior, and toggle accessibility details.

Edit this page
Last updated: May 22, 2026, 6:53 PM