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