Button groups
Buttons in button groups signal a number of equally important actions that will occur when the user taps on them. Button groups can include normal buttons with icon and or text label (dropdown) or any mixture of the three.
Using button groups
Buttons must carry a label. In case of icon only buttons, it will become available only to screen reader users. They can carry an icon or an indicator.
Designing
Label
Button labels should be as short as possible, with text that clearly states what action will be taken once the button is pressed (e.g. download, submit form, search).
Icon (optional)
Icons simplify user recognition and provide ability to shorten button label to a minimum.
Button groups always consist of normal (framed) buttons.
States of button groups
Button group buttons have following visually separate states:
Types
Button groups with only one possible selection at a time
Button groups consist of two or more buttons. While it's possible to group buttons to strengthen actions being equal and connected, there's also a button select group, where only one of the actions can be activated at a time.
Primary button groups with two equally important actions
Primary buttons signal the single, primary action in a given view. Even though they should not be used twice or more in a view there are circumstances where two equally important primary actions are presented to the user – a button group of two buttons, progressively or destructively flagged.