Example
The button group expects two or more Button components as children.
Patterns
Button order
The order of button priority should match the alignment of surrounding text. When text is left-aligned, buttons should be arranged so that the leftmost button is the most critical. When text is end- or center- aligned, the most critical action should be the furthest end.
Overflow
When horizontal space is limited, the orientation switches to a vertical layout. ButtonGroup should be used when there are two or more related Buttons in a group. To see the orientation switch in the example above, resize the width of your window.
Props
Orientation
Setting the orientation to "vertical" will prevent dynamic orientation changes. The group will remain in a vertical layout regardless of the available width.
Alignment
Button groups are aligned contextually. In general, button groups are left-aligned to follow content such as a block of text. They are center-aligned in the context of an empty state. And, they should be end-aligned inside container components such as dialogs, popovers, or cards.
Vertically oriented button groups follow the same alignment rules.
Disabled
Influence all buttons within a group using the isDisabled prop. This state can be used to maintain layout continuity and to communicate that a button group may become available later.