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