Toggle is a user-interface component that allows people to manage the state of content or a view. Unlike buttons that let people choose from a list of items, toggles enforce a mutually exclusive state, on or off. When toggles are used consistently and with clear labels they can be very effective in a variety of contexts and situations.

In addition to the visible label, it’s important that toggles have action text that explains what happens when a toggle is pressed, and how to press it. This text should be as concise as possible while remaining meaningful. If it’s difficult to convey what the toggle will do with just action text then it’s often better to use a visual icon to describe what happens when the toggle is pressed, as shown below.

Often designers add colors to help distinguish the state of a toggle. However, for people with color vision deficiency this can actually make it confusing! If you’re using a toggle to communicate a binary state, try to stick with the default color palette of red/green, rather than adding a secondary color.

A toggle is an excellent tool for managing the state of features that users can turn on and off. Many teams perform Experiment Toggles to test new features in production without impacting existing or legacy functionality. It’s important that these toggles can be easily re-configured for testing purposes, and that the re-configuration does not depend on the toggle being pushed to an On or Off state. To achieve this, it’s best to build a toggle configuration system that lives side-by-side with the code that it governs (instead of requiring the feature flag to be re-deployed in order to change its state).