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.

installyarn add @react-spectrum/buttongroup
version3.0.0-alpha.1
usageimport {ButtonGroup} from '@react-spectrum/buttongroup'
View guidelines
Spectrum
View repository
GitHub
View package
NPM

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#

NameTypeDefaultDescription
isDisabledboolean—Whether the Buttons in the ButtonGroup are all disabled.
orientationOrientation"horizontal"The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent any switching behaviors between 'vertical' and 'horizontal'.
childrenReactNode—The Buttons contained within the ButtonGroup.
alignAlignment | 'center'"start"The alignment of the buttons within the ButtonGroup.
UNSAFE_classNamestring—
UNSAFE_styleCSSProperties—
Layout
NameTypeDefaultDescription
flexstring | number | boolean—
flexGrownumber—
flexShrinknumber—
flexBasisnumber | string—
alignSelf'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'stretch'—
justifySelf'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'—
flexOrdernumber—
gridAreastring—
gridColumnstring—
gridRowstring—
gridColumnStartstring—
gridColumnEndstring—
gridRowStartstring—
gridRowEndstring—
Spacing
NameTypeDefaultDescription
marginDimensionValue—
marginTopDimensionValue—
marginLeftDimensionValue—
marginRightDimensionValue—
marginBottomDimensionValue—
marginStartDimensionValue—
marginEndDimensionValue—
marginXDimensionValue—
marginYDimensionValue—
Sizing
NameTypeDefaultDescription
widthDimensionValue—
minWidthDimensionValue—
maxWidthDimensionValue—
heightDimensionValue—
minHeightDimensionValue—
maxHeightDimensionValue—
Positioning
NameTypeDefaultDescription
position'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'—
topDimensionValue—
bottomDimensionValue—
leftDimensionValue—
rightDimensionValue—
startDimensionValue—
endDimensionValue—
zIndexnumber—
isHiddenboolean—
Accessibility
NameTypeDefaultDescription
rolestring—
idstring—
tabIndexnumber—
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-controlsstring—Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-ownsstring—Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-hiddenboolean | 'false' | 'true'—Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

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>