A toggle, also known as a toggle switch or toggle button, is a type of switch that has two possible outcomes, or state: on or off. Toggles are used in many aspects of computing, from desktop and mobile apps to browser settings and preference lists.

The word toggle comes from the 18th century, when it was used for a pin passed through the eye of a rope to fasten it. It’s still used for that purpose, but now it can also be used for an up-and-down switch such as a light switch.

Using Toggles in Figma

As with any user-interface component, toggles can make a difference to the overall experience of your site or app. They are a great way to update preferences and other types of information, but they should only be used in situations where the two states have a clear and immediate impact on the user’s experience.

Toggle Labels are Critical

In general, toggle labels should be standardized, direct and easy to read. They should also not be neutral or ambiguous, as this can confuse the user.

Using Toggles in Video Interactions

When navigating between frames with the same video, you can use the Reset video states toggle to restart the video from its beginning between frames. This can be useful for a variety of purposes, including previewing playback on hover.

Toggles are a powerful tool for prototyping, but they can be difficult to manage when the toggle configuration is complex. For this reason, many teams move toggle configuration into a centralized system or DB. This typically includes a UI for system operators, testers and product managers to view toggle configurations and modify them.