Switches

Switches are used to toggle functionality.

Specifications

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

Behaviors

  • Avoid changing the label text based on on and off state.
Do use the same label text for both the on and off state. Don't change label text between states.

Colors

ElementPropertyColor
Toggle White White
#ffffff
#ffffff
Label Gray 8 Gray 2
#464b52
#b7b9c3
Default/OnBackground Blue Light Dark Mode Blue
#217cbb
#019aeb
Default/OffBackground Gray 4 Gray 4
#90939f
#90939f
Focused/OnBackground Trimble Blue Dark Mode Blue
#0063a3
#019aeb
Focused/OffBackground Gray 4 Gray 4
#90939f
#90939f
Border Blue Light Dark Mode Blue
#217cbb
#019aeb
Hover/OnBackground Trimble Blue Dark Mode Blue
#0063a3
#019aeb
Hover/OffBackground Gray 4 Gray 4
#90939f
#90939f
Border Blue Light Dark Mode Blue
#217cbb
#019aeb
Disabled/OnBackground (30%) Trimble Blue Dark Mode Blue
#0063a380
#019aeb
Disabled/OffBackground (30%) Gray 4 Gray 4
#90939f80
#90939f

Editorial

  • Avoid acronyms.
  • Use 2-5 words.
  • Use the same label text for on and off states