Button Groups

Overview

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).

Usage

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.

Types

Button groups support two layout directions: horizontal and vertical

Horizontal Button Group

Vertical Button Group