Toggle button
Toggle buttons allow users to select one of multiple options with a single click or tap.
Guidelines
EDS has one set of primary toggle buttons with either an icon and no text, or text and no icon. When using an icon it must be directly related to the action of the button.
Toggle buttons group a set of related actions in one shared common container. Only one option in a group of toggle buttons can be selected and active at a time. Selecting one option deselects any other.
Accessibility
When expanded use tab to review current page headings and press enter or space to navigate to the selected section
Implementation in Figma
Instructions
- In Figma go to the Assets Panel and search for toggle.
- Drag and drop the component in your frame.
- Rename and resize the component if needed.
- Choose the variant from the Design Panel.