Skip to main content
The ButtonGroup component can be used to group related buttons.

​
Import

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

​
Basic Usage

import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';

export default function BasicButtonGroup() {
  return (
    <ButtonGroup variant="contained" aria-label="Basic button group">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  );
}

​
Props

​
variant
'text' | 'outlined' | 'contained'
default:"'outlined'"
The variant to use.
​
color
'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
default:"'primary'"
The color of the component. Supports both default and custom theme colors.
​
size
'small' | 'medium' | 'large'
default:"'medium'"
The size of the component. small is equivalent to the dense button styling.
​
orientation
'vertical' | 'horizontal'
default:"'horizontal'"
The component orientation (layout flow direction).
​
disabled
boolean
default:"false"
If true, the component is disabled.
​
disableElevation
boolean
default:"false"
If true, no elevation is used.
​
disableFocusRipple
boolean
default:"false"
If true, the button keyboard focus ripple is disabled.
​
disableRipple
boolean
default:"false"
If true, the button ripple effect is disabled.
​
fullWidth
boolean
default:"false"
If true, the buttons will take up the full width of its container.
​
sx
SxProps<Theme>
The system prop that allows defining system overrides as well as additional CSS styles.
​
children
ReactNode
The content of the component.

​
API Reference

Build docs developers (and LLMs) love

Get started for freeTalk to us