Toggle – Designing Toggle Buttons for Enterprise IT

Toggle is the digital magazine for technology executives, and the people who make technology work. It is a mix of news and opinion pieces, plus interviews with the leaders who are building the future of enterprise IT.

Toggles help users update settings, views and content. Toggle buttons should be clear to identify the setting or view they control, use standard visual design for clarity and provide a direct, immediate result when activated. They should also provide contextual feedback to indicate their current state. This is best done through the use of a toggle icon and associated text or by using an on/off indicator that updates the context.

When it comes to choosing the visual cues for toggle buttons designers should consider contrast, cultural context and societal expectations. For example, using red to signal an on state can be counterintuitive for those who associate that color with stop signs or stop lights. Embossment has also proven unreliable as a primary cue for toggle states. It’s often best to use a simple bold-thin font combination instead.

It’s important to test the toggle configuration that you expect to go live in production, as well as a fall-back configuration where all toggles are flipped Off. Savvy teams will also perform some tests with all toggles flipped On, to ensure they don’t cause unexpected regressions in the production system when a new release is made. This is often difficult with static config, but can be improved by adopting a runtime approach that allows for dynamic re-configuration of a feature flag rather than the need to deploy and re-test an entire artifact.