A toggle is a button that can be pushed to switch between two opposite states or options. Toggles are found in everyday technology devices such as smartphones to enable or disable WiFi and Bluetooth. They are also used in software applications to switch between different display modes. Toggles are often labeled with high contrast colors and state descriptors to help users understand their current state. They are also important to consider when implementing responsive design as they help to enable a user to switch between various layouts or displays depending on screen size and resolution.

In our context, we use Toggles to enable a user to update preferences, settings and other types of information. We recommend using them sparingly and with care. When you do, make sure the labels are clear and direct, don’t rely on color to convey meaning (see WCAG 1.4.1), and ensure the visual style is consistent.

Toggles are also commonly referred to as Feature Toggles or Feature Flags. The term Feature Flag is a bit more appropriate because it better reflects the idea that they are short lived compared to other categories of toggles. Typically, a Feature Flag is used to perform multivariate or A/B testing on a small cohort of users while a Feature Toggle is used to enable or disable features for a larger group of users. A Feature Toggle is ideal for enabling or disabling features that are resource intensive for users. For example, after a Canary Release, an e-commerce company might decide that the new algorithm B is too resource-intensive for their user base and instead decide to switch to algorithm A through a Permission Toggle.