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
Button Group
Last Updated on Sep 29, 2022
Button groups are used to combine related actions together. They are useful when you need to display several actions, but space is limited.
View Figma Component

Design Principles

  • Button Groups follow all of the same guidance as individual buttons.
  • Button Groups are only for primary outline, secondary outline, and tertiary button variants. Solid, transparent, and icon-only button groups are not allowed.
  • The Selection Bar is a special button group for grouping actions related to all selections. Use it when making bulk changes like edit, delete, duplicate, enable, disable, etc.
  • The split button is a button group that allows for groups with very similar actions under a menu. It’s used when there is a single action that is used much more frequently than other actions.
  • Don’t use a split button if the menu options are very different actions to the left button. For example, starting different user flows.

Do's and Don'ts

Use split buttons when there is an obvious action that is most important, but additional similar actions.
Show icons to the left of the button label unless the button opens a menu. Then display an arrow to the right.
Don’t use icon-only buttons in button groups.
Don’t use solid buttons or transparent background buttons in button groups.
Table of Contents
Component VariantsDesign PrinciplesDo's and Don'ts
Related Components
Action IconButtonMenu
Copyright © 2022 The Nielsen Company (US), LLC. All Rights Reserved.