ButtonGroup

ButtonGroup handles overflow for a group of Buttons. When there isn't enough horizontal space for every Button, then it switches to a vertical layout. Anytime there are two or more Buttons next to each other, a ButtonGroup should be used.

Example#

To see the orientation switch, reduce the width of your window.

<ButtonGroup width="50%">
  <Button variant="primary">Rate Now</Button>
  <Button variant="secondary">No, thanks</Button>
  <Button variant="secondary">Remind me later</Button>
</ButtonGroup>

Content#

ButtonGroup expects Buttons as children.

Props#

Visual options#

Orientation#

Setting this to 'vertical' will prevent any dynamic orientation changes, the ButtonGroup will remain in vertical regardless of the available width.

<ButtonGroup orientation="vertical">
  <Button variant="secondary">No, thanks</Button>
  <Button variant="secondary">Remind me later</Button>
  <Button variant="primary">Rate Now</Button>
</ButtonGroup>

Alignment#

Button groups are aligned contextually. Generally (in LTR languages), button groups should be left-aligned to follow content. However, they should be right-aligned inside container components, such as in dialogs, popovers, or cards. They should be center-aligned in the context of an empty state. In RTL, left and right should be flipped. To see the orientation switch, reduce the width of your window.

<View width="50%">
  <ButtonGroup align="end" width="100%">
    <Button variant="secondary">No, thanks</Button>
    <Button variant="secondary">Remind me later</Button>
    <Button variant="primary">Rate Now</Button>
  </ButtonGroup>
</View>

<View width="50%">
  <ButtonGroup align="center" width="100%">
    <Button variant="secondary">No, thanks</Button>
    <Button variant="secondary">Remind me later</Button>
    <Button variant="primary">Rate Now</Button>
  </ButtonGroup>
</View>