Toggle Button
A toggle button can be used when an element needs to remain active or open for extended periods of time. The affects of a toggle button should visibly change content on the page.
Demo and Developer GuidelinesAnatomy
Toggle are similar to our button designs in that they allow for text, icon, or a text and icon combo (as pictured below).
Types
Depending on the use case, the toggle button can utilize an icon, label or both.
States
Behavior
General Rules
Depending on the use case, the toggle button can utilize an icon, label or both.
A toggle can open/close a panel.
A toggle can enable edit mode.
In general, multiple toggle buttons are mutually inclusive (similar to checkboxes, not radios) but consider disallowing a selection of multiple toggles if they trigger UI changes in the same location on the page (such as a right-side contextual panel).
Multiple selected toggles.
The label of your toggle button should not change on press.
Correct
Incorrect
General Rules
A display needs to go into a specific mode (if edit mode is triggered using a toggle button, save/cancel buttons need to be used).
The element triggered needs to remain active until made inactive by the user.
An item needs to be active (as opposed to selected).
The element triggered needs to remain active until made inactive by the user.
An item needs to be active (as opposed to selected).
Please reach out to the system designers if your use case does not fall within the form guides.
General Rules
• A view needs to be modified (UI changes, but data stays the same).
• To trigger an action on the backend.
• Configuring settings that do not require an affirming action.
• When an item needs to be selected.
• To trigger an action on the backend.
• Configuring settings that do not require an affirming action.
• When an item needs to be selected.