Button Group

A button group is a grouping of buttons whose actions are related to each other.

Too many calls to action will overwhelm and confuse users so they should be avoided.

A button group can be either horizontal or vertical in its orientation. By default, a button group is horizontal. Use vertical option when horizontal space is limited.

Space Between

Left Aligned

Right Aligned

Stacked

Groups have the primary action aligned to the right by default but may be flipped.

Button groups have 0px built in padding around them and needs to be added during setup.

BG = $global-static-surface-primary-color-default
Border = $global-static-border-primary-color-default