Button Group

The ButtonGroup component can be used to group related buttons.

Basic button group

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

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

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

Press Enter to start editing

Button variants

All the standard button variants are supported.

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

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

Press Enter to start editing

Sizes and colors

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

<ButtonGroup size="small" aria-label="Small button group">
  {buttons}
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="Medium-sized button group">
  {buttons}
</ButtonGroup>
<ButtonGroup size="large" aria-label="Large button group">
  {buttons}
</ButtonGroup>

<ButtonGroup size="small" aria-label="Small button group">
  {buttons}
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="Medium-sized button group">
  {buttons}
</ButtonGroup>
<ButtonGroup size="large" aria-label="Large button group">
  {buttons}
</ButtonGroup>

Press Enter to start editing

Vertical group

The button group can be displayed vertically 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"
  aria-label="Disabled button group"
>
  <Button>One</Button>
  <Button>Two</Button>
</ButtonGroup>

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

Press Enter to start editing

Experimental APIs

Loading button

You can use the <LoadingButton /> from @mui/lab in the button group.

<ButtonGroup variant="outlined" aria-label="Loading button group">
  <Button>Submit</Button>
  <LoadingButton>Fetch data</LoadingButton>
  <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
    Save
  </LoadingButton>
</ButtonGroup>

<ButtonGroup variant="outlined" aria-label="Loading button group">
  <Button>Submit</Button>
  <LoadingButton>Fetch data</LoadingButton>
  <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
    Save
  </LoadingButton>
</ButtonGroup>

Press Enter to start editing

Material Design 3

The default Material UI Button Group component follows the Material Design 2 specs. To use the M3 version, install the experimental @mui/material-next package.

import ButtonGroup from '@mui/material-next/ButtonGroup';

<ButtonGroup />

Playground

color

variant

size

orientation

disabled

To learn more about Material UI's M3 implementation, visit the M3 Components documentation.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.