Toggle switches


A switch that makes it possible to enable or disable an action. These two actions should be simple to understand and represent an opposite meaning (E.g. ‘Start’ & ‘Stop’).


Toggle switches have two key sizes: small and large.




Click area

Current state higlight

  • Depending on the context, different text-sizes are possible.
  • A disabled toggle has a disabled label.
  • The label is part of the click target, except when there is a link present in the label. In that case, use a paragraph instead.
  • Labels should start with an uppercase letter.
  • For enhanced usability, there is optional label highlighting for the current state.