Toggle Button
Last Updated on Sep 29, 2022
A toggle button lets users make a choice between two options. They can display related actions to help toggle multiple states of a UI.

Design Principles

  • Toggle buttons are dual state buttons that trigger actions or events immediately. A great example is a “Show/Hide Filters” button.
  • The button’s copy can change depending on state. They should be similar in length and type. The default should be to keep the copy the same in both states.
  • When grouped, toggle buttons can be helpful on/off filters for data. These filters should usually be multi-select (like checkboxes) and not single-select (like tabs). Do not recreate the functionality of tabs using toggle buttons.

Do's and Don'ts

Use if you have a group of simple on/off filters
Keep the copy the same or very similar in both states
Don’t add more than 2 states.
Don’t use in place of tabs.