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
When using toggle buttons, make sure the text used clearly explains what each toggle button does.
Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Icons
When using icons without text, make sure each icon has a clear accessible name.
Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Text and icons
Sometimes icons might not be enough to explain all the options clearly, and it may be neccessary to combine text and icon toggle buttons.
Current active theme is Sainsbury's. You can see all developer documentation on our Fable Storybook site.
Content 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.