HomeFoundationsComponents
AccordionAction IconBreadcrumbButtonButton GroupCardCheckboxChipContext Switcher
Data VisualizationComing Soon
Date PickerComing Soon
DialogEmpty State
Form LabelComing Soon
ImageInputLinkListLoaderMenuModalPopoutProgress BarRadioRange SliderScroll BarSelectStepperSwitch
TableComing Soon
TabsTileToastToggle ButtonTooltip
PatternsDevelopmentFAQ
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.
View Figma ComponentView MAF Storybook

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.
Table of Contents
Component VariantsDesign PrinciplesDo's and Don'ts
Related Components
ButtonContext SwitcherTabs
Copyright © 2022 The Nielsen Company (US), LLC. All Rights Reserved.