Toggle button

A toggle lets users switch easily between related sections of content.

How to use toggle buttons

Use toggle buttons to let users quickly switch between views in the same context, for example changing a grid or list view on a product listing page.

When using toggle buttons:

  • Only one option can be selected and active at a time
  • Once a user selects an option, the results should be displayed immediately
  • Provide a visible label that clearly identifies the purpose of the toggle buttons

Types of toggle buttons

Text

  • Interactive demo - Sainsbury's

Icons

When using icons without text, make sure each icon has a clear accessible name.

  • Interactive demo - Sainsbury's

Text and icons

  • Interactive demo - Sainsbury's

Copy guidelines

When using toggle buttons:

  • Be clear about what will happen if the toggle is selected
  • Start your toggle labels with a capital letter
  • Don’t use commas or any punctuation at the end of each label
  • Don’t use more than two words per label

Was this page helpful?


Get in touch

Our team can answer any questions about using toggle buttons or give you a helping hand with your next project.
Select a theme to demo: