Toggle

Usage

Toggle is a two-state button. Bits renders a real <button> and owns aria-pressed, so the state is announced without any work on your side. An icon-only toggle carries no text, so it needs an aria-label — otherwise it has no accessible name at all.

Variants

outline keeps a visible border when off; ghost shows nothing until hovered or pressed. Both use the primary tone for the on state.

Sizes

Three sizes matched to the Button scale, so they line up in a toolbar.

Toggle vs Switch

They are not interchangeable, and the difference is about when the change takes effect. A Switch is a setting — flipping it applies immediately, like turning on notifications. A Toggle is a button that stays pressed — bold in a text editor, a filter that is active. If the control belongs in a toolbar next to other buttons, you want Toggle. If it belongs in a settings form, you want Switch.

Need several related toggles where only one can be active? That is Toggle Group, not a row of Toggles.

Props

Plus every native <button> attribute via prop spreading. pressed is bindable.