Switch Component: Toggle Button

Switch Component: Toggle Button

Published: July 24, 2018

Last updated: December 17, 2018

Pattern to create a toggle button,
visually styled to resemble a switch component.

Pattern Demo



Visual design note

Switch toggle buttons are commonly represented as a visual text label and a switch UI, or as a text label with a switch UI that has its own “On” and “Off” labeling.

By default, the component outputs the unlabeled switch UI. Using the attribute data-switch-toggle-labels or manually adding a class of toggle-switch–labels, the component will add “on” and “off” labels to the switch UI.

Pattern Details

Pattern Markup
<a data-switch-toggle>
Progressively Enhanced [...]

Read article at scottaohara.github.io

Article Taxonomies

Categories: Terms: , , , Keywords: ,