ButtonGroup

A button group wraps multiple buttons whose actions relate to each other. It handles spacing and automatic orientation changes based on the window size for fully accessible behaviour.

Horizontal Orientation

By default, the button group will align all buttons in a horizontal orientation. If the space in the window or container is not big enough to fit all buttons of the button group horizontally, the component will automatically change the orientation to be vertical. This ensures that all buttons are accessible.

<ButtonGroup orientation='horizontal'>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup orientation='horizontal'>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup orientation="horizontal">
  <Button>No</Button>
  <Button>
    Maybe
  </Button>
  <Button>Yes</Button>
</ButtonGroup>

Vertical Orientation

The button group also supports a vertical orientation, which stacks all buttons on top of each other.

<ButtonGroup orientation='vertical'>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup orientation='vertical'>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup orientation="vertical">
  <Button>No</Button>
  <Button>
    Maybe
  </Button>
  <Button>Yes</Button>
</ButtonGroup>

Start Alignment

The alignment of the buttons within the button group can be controlled via the alignment prop. By default, the buttons will be placed at the start of the button group.

<ButtonGroup alignment='start'>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup alignment='start'>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup alignment="start">
  <Button>No</Button>
  <Button>
    Maybe
  </Button>
  <Button>Yes</Button>
</ButtonGroup>

Center Alignment

The button group component also allows for center alignment, which will center the child components based on the orientation of the group.

<ButtonGroup alignment='center'>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup alignment='center'>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup alignment="center">
  <Button>No</Button>
  <Button>
    Maybe
  </Button>
  <Button>Yes</Button>
</ButtonGroup>

End Alignment

The button group component additionally supports for end alignment, which will align the buttons at the end of the group.

<ButtonGroup alignment='end'>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup alignment='end'>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup alignment="end">
  <Button>No</Button>
  <Button>
    Maybe
  </Button>
  <Button>Yes</Button>
</ButtonGroup>

Disabled State

The button group allows you to disable all of its child buttons with a single isDisabled prop.

<ButtonGroup isDisabled>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup isDisabled>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

<ButtonGroup isDisabled>
  <Button>No</Button>
  <Button>Maybe</Button>
  <Button>Yes</Button>
</ButtonGroup>

Accessibility

A button group component should only be used if there are two or more buttons. For detailed accessibility information about buttons, please visit the button component docs.

API