Skip to main content

Switches

Switches are used to toggle functionality.

Specificattions

A switch must have a visible label that clearly conveys what option a user will turn on or off.

Anatomy

Switches Specifications

Behaviors

All buttons (including icon buttons) should have the following states:

  • Default
  • Active
  • Focus
  • Disabled

Toggle Progression

Switches Toggle

Labels & Icons

Switches Labels & Icons

Editorial

  • Avoid acronyms.
  • Use 2-5 words.
  • Use the same label text for on and off states
Last updated March 1, 2023.