COMPONENTS

Button Group

Button Group styles individual buttons that have a logical relationship into one cohesive group.

button group

Buttons within Button Group should be related actions, but will not not maintain selection state. For buttons that are a related group and also need to maintain a selected state, use Button Select.

button group
  1. Button
  2. Button Group

There are four types of individual buttons that can be used in a button group – icon only, basic, leading icon and trailing icon.

button group

Button Group can be oriented horizontally or vertically.

button group

There are four core action types that have defined styles – primary, secondary, tertiary and destructive. These can be applied to each button in the button group.

button group

Button groups can be displayed in large, medium and small sizes. All buttons within a button group should use the same size.

button group