Storybook failed to load. Please connect to the VPN to access.




Example of active toggle


Toggles are used to indicate two binary states (on/off, published/unpublished...), usually in the context of settings. We use them to manage options and settings within the Portal and Editor (e.g. activating languages or URLs).



  • Toggles have one predefined default state.
  • Change of a state is instant and doesn't require a confirmation button.
  • The change of the state must be reflected in the UI by movement and color - the switch should change position and the color depending on the state. Active (positive) state should be clearly more prominent than the passive (negative) state.
  • Whole component (label and the toggle) should be clickable.



  • Use labels that are short, direct, unambiguous and unchanging.
  • When writing any toggle label, think of a question with a Yes/No answer, eg. (Is this guide) Public, or (Should we) Display notification dialog
  • Avoid using labels inside the component.


Do's and dont's (needs visual examples)

  • DO use it when the change is immediate, DON'T combine a toggle with a confirmation button.
  • DO use toggles for states (turn on/off), DON'T use togges for actions (download).
  • DO use toggle for binary (yes/no) states, DON'T use toggles for oppositional states (two different separate states connected to different user task - list view/table view).
  • DO use a lable on the left side of the toggle, DON'T use a lable inside of the toggle.
  • DO show the label always, DON'T change the label when the state changes (eg. Published and Unpublished).



We use two different types of toggle variants: disabled-inactive and disable-active. Both variants require a tooltip on hover to informs users why a toggle is disabled.


We use this state to indicate an entity cannot be activated due to a condition not being fulfilled. For example: not possible to publish, when required fields in a specific language are not filled.



We use this state to indicate an entity cannot be de-activated. Examples include: a language set as default in publishing options, the only valid app URL.



For more information on what can trigger a disabled-active, please see this document on entity activation: