ButtonGroup

ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.

orientation

align

size

isDisabled

import {ButtonGroup, Button} from '@react-spectrum/s2';

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

Overflow

When horizontal space is limited, ButtonGroup switches to a vertical layout.

import {ButtonGroup, Button} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div
  className={style({
    width: 300,
    padding: 16,
    borderWidth: 1,
    borderStyle: 'solid', 
    borderColor: 'gray-300',
    borderRadius: 'default',
    resize: 'horizontal',
    overflow: 'hidden'
  })}>
  <ButtonGroup>
    <Button variant="primary">Rate Now</Button>
    <Button variant="secondary">No, thanks</Button>
    <Button variant="secondary">Remind me later</Button>
  </ButtonGroup>
</div>

API

<ButtonGroup>
  <Button />
  <LinkButton />
</ButtonGroup>

Name	Type	Default
`children`	`ReactNode`	Default: —
The Buttons contained within the ButtonGroup.
`isDisabled`	`boolean`	Default: —
Whether the Buttons in the ButtonGroup are all disabled.
`orientation`	`'horizontal' \| 'vertical'`	Default: `'horizontal'`
The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent any switching behaviors between 'vertical' and 'horizontal'.
`size`	`'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the Buttons within the ButtonGroup.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.