Components

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.

button groups visual example

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:

button groups 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.

Coding

See OOUI's demos section of button groups.