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 |
Last updated
