Switch

switch component

Introduction

The switch component is used to toggle an option.

View in Groundhog

Styleguide

font-familiy: Bernina Sans Regular
font-size: 14px
height: 20px //with border
width: 36px //with border
border-width: 1px

Switch margin and padding

x: 8px

Switch margin and padding

x: 8px (on/off-symbol is centered in a 8x8px box)
y: 12px
z: 4px

Switch on light background

Default on

Switch default on

border: 1px solid $turquoise-600
background-color: $turquoise-600
toggle-color: $gray-700
on/off-symbol-color: #fff

Default off

Switch default off

border: 1px solid $turquoise-600
background-color: transparent
toggle-color: $gray-700
on/off-symbol-color: $gray-700

Hover on

Switch hover on

border: 1px solid $turquoise-700
background-color: $turquoise-700
toggle-color: $gray-700
on/off-symbol-color: #fff

Hover off

Switch hover off

border: 1px solid $turquoise-700
background-color: $gray-100
toggle-color: $gray-700
on/off-symbol-color: $gray-700

Active on

Switch active on

border: 1px solid $turquoise-800
background-color: $turquoise-800
toggle-color: $gray-700
on/off-symbol-color: #fff

Active off

Switch active off

border: 1px solid $turquoise-800
background-color: $gray-100
toggle-color: $gray-700
on/off-symbol-color: $gray-700

Disabled on

Switch disabled on

border: 1px solid $gray-300
background-color: transparent
toggle-color: $gray-300
on/off-symbol-color: $gray-300

Disabled off

Switch disabled off

border: 1px solid $gray-300
background-color: transparent
toggle-color: $gray-300
on/off-symbol-color: $gray-300

Switch on dark background

Default on

Switch default on dark bg

border: 1px solid $turquoise-600
background-color: $turquoise-600
toggle-color: #fff
on/off-symbol-color: #fff

Default off

Switch default off dark bg

border: 1px solid #fff
background-color: transparent
toggle-color: #fff
on/off-symbol-color: #fff

Hover on

Switch hover on dark bg

border: 1px solid $turquoise-700
background-color: $turquoise-700
toggle-color: #fff
on/off-symbol-color: #fff

Hover off

Switch hover off dark bg

border: 1px solid #fff
background-color: rgba(255, 255, 255, 0.2)
toggle-color: #fff
on/off-symbol-color: #fff

Active on

Switch active on dark bg

border: 1px solid $turquoise-800
background-color: $turquoise-800
toggle-color: #fff
on/off-symbol-color: #fff

Active off

Switch active off dark bg

border: 1px solid #fff
background-color: rgba(255, 255, 255, 0.3)
toggle-color: #fff
on/off-symbol-color: #fff

Disabled on

Switch disabled on dark bg

border: 1px solid $gray-500
background-color: transparent
toggle-color: $gray-500
on/off-symbol-color: $gray-500

Disabled off

Switch disabled off dark bg

border: 1px solid $gray-500
background-color: transparent
toggle-color: $gray-500
on/off-symbol-color: $gray-500

Animation

The switch's toggle transition is animated. The animation-timing-function is set to ease-out.

Multiple switches

Switches underneath each other

x: 20px