Toggle is a simple user-interface component that lets people update preferences, settings, and other types of information. It is generally used to manage the state of content or a view and not for choosing from a set of options (for which a drop-down would be better). Toggles work best when clearly identify the setting, view, or content that they control. They should have a clear appearance and use direct labels, following the proximity principle. They should also be updated immediately to reflect their state, as opposed to a toggle switch (like the top toggle) that uses a button style but doesn’t change its appearance until clicked. When choosing a color for a toggle it’s important to keep contrast in mind and consider the societal and cultural implications of that choice.

Savvy teams view the toggle configuration as inventory that comes with a carrying cost and seek to minimize the number of toggles in their codebase. They also want to be proactive about removing toggles that are no longer needed as they become deprecated. They can do this with a variety of methods, from simply commenting out code to more sophisticated approaches like a preprocessor’s #ifdef feature.

A common misuse of toggles is when a team wants to use them for an experiment or an A/B test. They add an experiment toggle to the production configurator that splits users into two different cohorts and determines which algorithm performs best. When they have conclusive data they remove the toggle and push that algorithm to all users.