Preview

Code

                                                        
                                                        
                                                            I'm a line of code
                                                        
                                                            

Guidelines

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.

Behaviour

• 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

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

Variants

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

With icon

Without icon

Mixed

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