toggle

Two-state button with aria-pressed.

status: partial js: consumer support: baseline

Preview

<button class="toggle" aria-pressed="true" aria-label="Toggle bold"><svg aria-hidden="true">…</svg></button>

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/toggle.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add toggle

Standalone needs JS to flip aria-pressed; use toggle-group for zero-JS

.toggle .toggle-sm .toggle-lg .toggle-outline .has-text

base/tokens