In a design system, a "toggle" is a graphical user interface element that allows users to switch between two states or options. Toggles often represent binary choices, such as on/off or yes/no.
Toggles typically consist of a small graphical element, such as a switch or button, that can be toggled on or off by the user. When the toggle is on, it usually displays a visual indication, such as a color change or an icon, to indicate that the option is selected.
Toggles can be used in a variety of user interface scenarios, such as to turn a feature on or off, to switch between different modes or views, or to select between different options. They are often used in settings or preferences screens, but can also be used in other parts of an application or website.
In a design system, toggles are often defined as a standard component with consistent styling and behavior, making it easy for designers and developers to use them consistently throughout an application or website. The design system may also provide guidelines for how to use toggles effectively, including best practices for placement, labeling, and interaction behaviors, as well as guidelines for creating custom toggles that adhere to the overall design system.
Anatomy
Properties
Active
State
Layout and spacing
There are no released design system versions just yet.