Skip to content
search icon
clear
Component Status

Buttons toggle

Toggle buttons allow users to select one of multiple options with a single click or tap.

Guidelines

The 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 button vs regular 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. A regular button is used when performing an action.

Toggle button width

Toggle buttons have a minimum padding that is automatically built into the component. You can however stretch the button to span one or multiple columns in width.

Toggle button labels

Avoid labels that are too long. Titles should be to the point and short, no more than three words.

Don't

  • Do not change the height of the toggle buttons.
  • Do not wrap a label over two lines.

Variations

The selected button has a contained background and high-emphasis. Do not use two active buttons in the same set of toggle buttons. The toggle buttons should be placed with 0px spacing between each other when placed inside a group.

Toggle buttons are found in the following variations:

  • Primary colour
    • Active
      • Active left, only text
      • Active centre, only text
      • Active right, only text
      • Active left, only icon
      • Active centre, only icon
      • Active right, only icon
    • Inactive
      • Inactive left, only text
      • Inactive centre, only text
      • Inactive right, only text
      • Inactive left, only icon
      • Inactive centre, only icon
      • Inactive right, only icon

Examples

FigmaExternal linkFigma design of toggle buttons
Edit this page on GitHub