Switch. Overview

What does the component do?

  • It is used for activating or deactivating individual setting options.

When should the component be used?

  • When setting options have to be activated or deactivated.

Rules

  • It can only be used for activating or deactivating a function.
  • No ‘on’ and ‘off’ labels can be used.
  • The setting option must be clearly named using a label on the left.
 Variants

States

The component has the following states:

  • Selected
  • Unselected
  • Disabled selected
  • Disabled unselected
  • Loading
  • Error (default / retry / reloading / button)

Variants

The component has the following variants:

  • Switch
    • Selected / unselected
  • Switch-Item
    • without icon / with icon
    • listed / boxed
    • without subtext / with subtext
    • without link / with link

Switch

Image of the switch, default
Image of the switch, default

Switch-Item

Liste
Image of the switch-item in a list
Image of the switch-item in a list
Liste, mit Icon
Image of the switch-item in a list with icon
Image of the switch-item in a list with icon
Liste, mit Subtext
Image of the switch-item in a list with subtext
Image of the switch-item in a list with subtext
Image of the switch-item in a list with link
Image of the switch-item in a list with link
Boxed
Image of the switch-item in a box
Image of the switch-item in a box
Boxed, mit Icon
Image of the switch-item in a box with icon
Image of the switch-item in a box with icon
Boxed, mit Subtext
Image of the switch-item in a box with subtext
Image of the switch-item in a box with subtext
Image of the switch-item in a box with link
Image of the switch-item in a box with link

Specification

Design