Switch Button

A button that has two mutually-exclusive states with auto-save behavior.

Overview

Also known as "Toggle", Switch Button allows users to switch between two mutually-exclusive states, such as:

• On/Off

• Show/Hide

• Activate/Deactivate

💡 Note that usually Switch Button is considered a selection control component. However, we have decided to consider it a Button because it has an Auto-Save behavior, unlike other listed components in forms. Selection Control components must follow Form Save behavior

We mainly use Switch Button to swap between two views (Show/Hide elements). But it can also be used for use cases such as setting enablement (Activate/Deactivate).

Because its state cannot be indeterminate,Switch Button always has a default value. It is up to product teams to determine which one would be the best one depending on features.

This component can be used with or without a Label. The Label can be placed on the right or the left of the switch. Note that adding a Label is relevant to explain to users the concrete consequences of their actions.

Do not change Switch label depending on its state. The label must be understandable in both states.

If Label seems too short to explain the action's consequences, aHelptext prop can be added. Then, formatting is automated for the label to appear on the left and the switch component on the right.

If disabled, a tooltip appearing while hovering the component can be added to explain why the action is unavailable.

Key takeaways

• Add a short label to help users understand the consequence of the action.

• Think wisely about the Default state.

• Add a tooltip to a disabled state to explain why the action is unavailable.

• Add a Save pattern to Switch Button; their action is immediate and does not need confirmation from the user.

• Change label depending on the state; Label must remain the same.