ButtonGroup renders an HTML <div> wrapper around its children with no semantic meaning of its own. It accepts the as prop to render a different element when the surrounding markup calls for one.

Interactive child components within the group handle their own semantics and accessibility.

Setting isDisabled on the group disables every button within it. The prop is passed to each Button so aria-disabled="true" is properly applied. The ARIA attribute is important for allowing Buttons to remain in the tab order and still be announced by assistive technology.

A Button that has been individually disabled cannot have its state overridden by the group setting.

Keyboard

table
Key	Function
`Enter`/`Space`	Simulates a click and activates the focused button.
`Shift`+`Tab`	Moves focus to the previous focusable element.
`Tab`	Moves focus to the next focusable element.

ButtonGroup

Structure

Disabled state

Keyboard

On this page