Button Group

A button group is a combination of multiple buttons related to each other.

#Example

#Size

The size determines the spacing between the buttons.

#Small

The default small size has a gap of 8px and should be used for sister buttons (save/cancel, next/back, undo/redo).

#Large

The large size has a gap of 16px and should be used for neighbor buttons (a row of buttons in the top right of the page).

#Usage

#Left alignment

Use left alignment in forms or other page content. This should be a default choice in most cases. Primary button is positioned first and secondary buttons are last.

#Center alignment

Use center alignment in empty or error states. Primary button is positioned first and secondary buttons are last. Try to use no more than two buttons when button group is aligned to center.

#Right alignment

Use right alignment in dialogs, wizards and toolbars. Secondary buttons are positioned first and primary buttons are last.

#Guidelines

#When to use

• When there are at least two buttons positioned near each other.

#When not to use

• When there's only one button in a group.

#Content

• Only buttons are acceptable as children to this component.

#Props

Inherits margin props.

Name	Default	Description
size	"sm"	"sm" | "lg" The size determines the spacing between the buttons.
children	—	ReactNode Buttons.