Slide toggle

A Slide toggle allows the user to change between two states.

Short description

The toggle is a representation of a physical switch that allows users to turn things on or off. Most common toggles are used to switch between as on/off in preferences, settings or turning on/off Wi-Fi on a smart phone.

Slide toggle

Specification

Colours

  • Normal: Grey 6 (background)
  • Hover: Grey 6 (background), Blue (circle)
  • Selected: Grey 6 (background), Dark blue 2 (circle)
  • Pressed: Blue (background)
  • Pressed and hover: Blue (background), Blue (circle)

Sizes

  • Height: 20px
  • Width: 40px

Switch

  • Height: 18px
  • Width: 18px

Touch area

  • Height: 40px
  • Width: 48px

States