Skip to main content

Button Groups

Button groups allow selection from a similar or related set of options.


A button group is used to organize related actions and allow selection and toggling. Buttons can be grouped in a single line or in a vertical column. They can be used within action bars (e.g. Toolbar).


Use when

  • Organizing similar functionality of 2-5 actions.
  • You need to show the selected action or states with contextual relationships.
  • Grouping related actions or states.
  • Stepping through linear content (e.g. Wizards).

Don’t use when

  • Actions represented by buttons are not related.
  • Mixing destructive and non-destructive actions.
  • Button labels do not appropriately describe the actions within one or two words. Instead use Links.
  • You need to navigate through content on the page. Instead, use Tabs.
  • You have more than 5 options so as not to overwhelm the user with too many choices.


Button groups support two layout directions: horizontal and vertical

Horizontal Button Group

Vertical Button Group

What's changed
Date Version Notes Contributors
02/14/2024 1.0.0 New component added. E. Gunther, E. Nowak, C. Oliff, C.Winsor