Toggle Button

Toggle Button is a button that stays on or off, alone or in a joined group. State is aria-pressed, flipped by a tiny init() module.

Public web API

A button with aria-pressed. The CSS reads it, so server-rendered state works without script.

<button data-bitsy-toggle-button type="button" aria-pressed="false">Show grid</button>

<script type="module">
  import { init } from "@bitsyui/bits/toggle-button/init";
  init();
</script>

init() flips aria-pressed and fires a bubbling change event. Space and Enter work natively.
Keep the label the same in both states. Icon-only toggles need aria-label.
data-bitsy-variant="subtle" and data-bitsy-size="sm" | "lg" go on the button.

Variants and states

Pressed is a filled surface with an inset border, so it does not rely on color.

Text toggles

Group, icon only

Subtle

Sizes

Disabled

Bit boundary

Toggle Button is one option switched on or off.

For a form setting that takes effect like a switch, use Switch.
To pick one of several options, use Segmented Control.
For an action that runs once, use Button.