Toggle Button Pattern

Toggle Button Pattern

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

Usage in SLDS

Usage in Base Lightning Components

Usage in Traditional Software Applications

ARIA Documentation: http://w3c.github.io/aria-practices/#button