Skip to content

Button group

The ButtonGroup component can be used to group related buttons.

Basic button group

The standard Button variants are supported.

Sizes and colors

The size and color props can be used to control the appearance of the ButtonGroup.

Vertical group

The ButtonGroup can be displayed veritcally using the orientation prop.

Split button

ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example), or be used to immediately trigger a related action.

Disabled elevation

You can remove the elevation with the disableElevation prop.

<ButtonGroup disableElevation variant="contained" color="primary">
  <Button>One</Button>
  <Button>Two</Button>
</ButtonGroup>