06/10/2022, 09:56 React Button Group component - Material UI

Edit this page

Button Group
The ButtonGroup component can be used to group related buttons.

Premium Templates. Start your project with the best templates for
admins, dashboards, and more.
ad by MUI

Feedback Bundle size Figma Adobe Sketch

Basic button group

The buttons can be grouped by wrapping them with the ButtonGroup component.
They need to
be immediate children.

ONE TWO THREE

<ButtonGroup variant="contained" aria-label="outlined primary button group">

<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>

Button variants
All the standard button variants are supported.

ONE TWO THREE

https://mui.com/material-ui/react-button-group/ O O 1/4
06/10/2022, 09:56 React Button Group component - Material UI
ONE TWO THREE

<ButtonGroup variant="outlined" aria-label="outlined button group">

<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup variant="text" aria-label="text button group">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>

Sizes and colors

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

ONE TWO THREE

ONE TWO THREE

ONE TWO THREE

<ButtonGroup size="small" aria-label="small button group">

{buttons}
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="medium secondary button group">
{buttons}
</ButtonGroup>
<ButtonGroup size="large" aria-label="large button group">
{buttons}
</ButtonGroup>

Vertical group
The button group can be displayed vertically using the orientation prop.

ONE ONE ONE

https://mui.com/material-ui/react-button-group/ 2/4
06/10/2022, 09:56 React Button Group component - Material UI
ONE ONE ONE

TWO TWO TWO

THREE THREE THREE

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.

SQUASH AND MERGE

Disabled elevation
You can remove the elevation with the disableElevation prop.

ONE TWO

<ButtonGroup
disableElevation
variant="contained"
aria-label="Disabled elevation buttons"
>
<Button>One</Button>
<Button>Two</Button>
</ButtonGroup>

API
<Button />
<ButtonGroup />

https://mui.com/material-ui/react-button-group/ 3/4
06/10/2022, 09:56 React Button Group component - Material UI

Button Checkbox

Was this page helpful?

https://mui.com/material-ui/react-button-group/ 4/4