A toggle is a switch with only two outcomes, either on or off. It’s used in hardware (your caps lock and num lock keys) as well as software (option items in options menus).
When designing toggles, you should clearly identify the setting, view, or content the toggle affects. You should also provide an icon, a label, or both that communicates the current state. This helps people manage the state of an object without having to understand the technical implementation details.
The word toggle comes from the 18th century and originally meant “pin passed through the eye of a rope to hold it in place.” Today, the term refers to a quick and simple switching mechanism between two states — such as when you use your mouse’s toggle button to hide sent messages during a video chat.
Often times designers use color to signal the current state of a toggle. While this is fine — as long as the color communicates a clear meaning — there are some important considerations to keep in mind. For example, using a more pronounced color to denote the active state can be confusing for users with red/green color blindness. Additionally, relying on color alone can be difficult for users with low contrast vision and cognitive impairments.
Savvy teams consider Feature Toggle configurations as inventory that has a carrying cost and try to minimize the number of toggles in their codebase. To help with this goal, many teams perform regression tests with all Feature Toggle configurations flipped On. This helps prevent surprise regressions in production.
