Toggle Button (Switch)

A toggle represents a physical switch that allows someone to choose between two mutually exclusive options. For example, “On/Off”, “Show/Hide”. Choosing an option should produce an immediate result.

Best Practices

Layout

• When people need to perform extra steps for changes to take effect, use a check box instead. For example, if they must click "Submit", "Next", or "OK" button to apply changes, use a check box.

Content

• Only replace the On/Off labels if there are more specific labels for the setting. For example, you might use Show/Hide if the setting is "Show images".

• Keep descriptive text short and concise - two to four words; preferably nouns. For example, "Focused inbox" or "Wi-Fi".

Toggle Button Design (without Text)

States

Transitions

Transitions	Front View	Isometric View
Appear
Enter
Exit
Interact
Disappear

Toggle Button Design (with Text)

States

Transitions

Transitions	Front View	Isometric View
Appear
Enter
Exit
Interact
Disappear