Toggle
Zweistufiger Button für dauerhafte Zustände wie Fett, Stumm oder Raster. Der gedrückte Zustand nutzt die zarte Akzentfläche; Größen, Fokusring und Trefferfläche teilt er sich mit allen anderen Controls.
Varianten
default liegt transparent auf der Fläche, outline trägt einen 1,5-px-Rahmen. Im gedrückten Zustand nutzen beide die zarte Akzentfläche mit accent-text.
Größen
sm, md und lg sind exakt so hoch wie Button und Input derselben Größe.
Mit Icons
Icon und Text stehen nebeneinander; ohne Text braucht der Toggle ein aria-label.
Kontrolliert
Der Zustand liegt im State; aria-pressed spiegelt ihn für Screenreader.
Fett: an
Playground
Variante, Größe und Zustand umschalten.
Barrierefreiheit
Der Toggle ist ein Button mit aria-pressed. Leertaste und Enter schalten ihn; der Fokusring kommt aus der gemeinsamen Control-Basis. Für exklusive Auswahl mehrerer Optionen ist die Toggle Group die richtige Wahl.
Ein Toggle signalisiert einen dauerhaften Zustand (fett, stumm, Raster). Eine einmalige Aktion gehört weiterhin auf einen normalen Button.