Switch button

A switch button is a group of buttons that allows the user to make 1 choice between 2 options.




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


                                                            I'm a line of code



The switch button is used to apply 1 option from 2 choices. It's used in both Editor and Portal (e.g: CIO/Multi-app) and for settings as well. This component follows some of the button's guidelines such as the sizes, the states, the behaviour, and content guidelines.

  • The switch button can be positionned above the content that it will impact
  • It always has to be laid out in a horizontal row
  • It can be used as an additional navigation
  • The primary action button has a middle emphazis


Switch button versus dropdown

The switch button will be used when the user will have to do a choice between 2 options. However, if the number of options exceeds 2, consider using a dropdown instead.


Switch button versus toggle

Toggles indicate a binary choice between two states: on and off (active and inactive), most commonly when enabling a setting. The switch button will be more appropriate to flip the content view and not always be related to settings. There are only 2 different options and just the possibility to choose 1 of them.




  • The switch button is triggered by a click
  • Only 1 option can be selected at a time
  • When an option is selected, it will automatically deselect the other option
  • When clicking on an option, will display a different content



Do's and dont's

  • Use the switch as a horizontal component only.
  • Use only for 2 options.
  • Don't use icons as the only switch button label
  • Don't mix different button widths within the same switch.



Content guidelines

  • Icons are optional and can be displayed or not, if they are displayed ensure that it's only to reinforce the meaning of the label
  • Keep the label short, only 1 word is recommended
  • The width of the buttons should be the same for both, even if the the number of characters in the label is different




The switch button comes in a single size, using the S size for its option buttons.

With icon

Variant with icon


Without icon

Variant without icon



This case is allowed but not recommended. Prefer for both buttons to follow the same label style.

Variant mixed