What Is a Togle?

The word toggle describes a switch that has two positions, either on or off. It also refers to a behavior that switches back and forth, like the way your brain continues to toggle between non-REM and REM sleep throughout the night.

A toggle button lets people manage the state of content or a view, and it uses a different appearance to indicate each state. It’s important to consider which visual cue to use to communicate the current state, as not all are equally effective. For example, our research found that using embossment as the primary cue for a toggle is unreliable. Instead, we recommend a combination of primary and secondary cues.

While a toggle can work in some situations, it’s best to avoid it where possible and choose a different control like a checkbox or radio button. The reason is that toggles are hard to comprehend at first glance — especially when the current state of the toggle isn’t immediately obvious. The current state of the toggle can seem arbitrary to users and they’ll often confuse it with other elements in the interface.

Using a toggle is also problematic when the goal is to perform multivariate testing or A/B testing with a feature flag. By hardcoding the toggle configuration into the release (either through a comment or via a preprocessor’s #ifdef) we prevent ourselves from re-configuring the toggle to see how the new implementation performs. This makes the toggle a poor choice for Champagne Brunch or Canary releases.