Toggle Button Pattern - Lightning Design System

A toggle button allows a user to pick between two states, on (pressed) and off (unpressed).

Behavior

A Toggle Button has 2 states: pressed and unpressed
A Toggle Button's text should not change based on state

Keyboard Interaction

Enter or Space press the button
Focus should stay on the button when it is pressed

Markup

Needs aria-pressed="true" when it is toggled on and false otherwise
The visual label should not change based on its pressed state

Note: due to inconsistent browser and assistive technology support for this role at the time of writing (Aug 2017), role="button" needs to be added to the button element

References

A toggle button allows a user to pick between two states, on (pressed) and off (unpressed).

Behavior

Keyboard Interaction

Markup

References

Usage in SLDS

Usage in Base Lightning Components

Usage in Traditional Software Applications