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, maxWidth: 'full', padding: 16, boxSizing: 'border-box', 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>

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.