---
filename: /packages/material-ui/src/ButtonGroup/ButtonGroup.js
---
# ButtonGroup API
The API documentation of the ButtonGroup React component. Learn more about the props and the CSS customization points.
## Import
```js
import ButtonGroup from '@material-ui/core/ButtonGroup';
// or
import { ButtonGroup } from '@material-ui/core';
```
You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
## Component name
The `MuiButtonGroup` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
## Props
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| children | node | | The content of the button group. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| color | 'default'
| 'inherit'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. |
| component | elementType | 'div' | The component used for the root node. Either a string to use a HTML element or a component. |
| disabled | bool | false | If `true`, the buttons will be disabled. |
| disableElevation | bool | false | If `true`, no elevation is used. |
| disableFocusRipple | bool | false | If `true`, the button keyboard focus ripple will be disabled. |
| disableRipple | bool | false | If `true`, the button ripple effect will be disabled. |
| fullWidth | bool | false | If `true`, the buttons will take up the full width of its container. |
| orientation | 'horizontal'
| 'vertical' | 'horizontal' | The group orientation (layout flow direction). |
| size | 'large'
| 'medium'
| 'small' | 'medium' | The size of the button. `small` is equivalent to the dense button styling. |
| variant | 'contained'
| 'outlined'
| 'text' | 'outlined' | The variant to use. |
The `ref` is forwarded to the root element.
Any other props supplied will be provided to the root element (native element).
## CSS
| Rule name | Global class | Description |
|:-----|:-------------|:------------|
| root | .MuiButtonGroup-root | Styles applied to the root element.
| contained | .MuiButtonGroup-contained | Styles applied to the root element if `variant="contained"`.
| disableElevation | .MuiButtonGroup-disableElevation | Styles applied to the root element if `disableElevation={true}`.
| disabled | .Mui-disabled | Pseudo-class applied to child elements if `disabled={true}`.
| fullWidth | .MuiButtonGroup-fullWidth | Styles applied to the root element if `fullWidth={true}`.
| vertical | .MuiButtonGroup-vertical | Styles applied to the root element if `orientation="vertical"`.
| grouped | .MuiButtonGroup-grouped | Styles applied to the children.
| groupedHorizontal | .MuiButtonGroup-groupedHorizontal | Styles applied to the children if `orientation="horizontal"`.
| groupedVertical | .MuiButtonGroup-groupedVertical | Styles applied to the children if `orientation="vertical"`.
| groupedText | .MuiButtonGroup-groupedText | Styles applied to the children if `variant="text"`.
| groupedTextHorizontal | .MuiButtonGroup-groupedTextHorizontal | Styles applied to the children if `variant="text"` and `orientation="horizontal"`.
| groupedTextVertical | .MuiButtonGroup-groupedTextVertical | Styles applied to the children if `variant="text"` and `orientation="vertical"`.
| groupedTextPrimary | .MuiButtonGroup-groupedTextPrimary | Styles applied to the children if `variant="text"` and `color="primary"`.
| groupedTextSecondary | .MuiButtonGroup-groupedTextSecondary | Styles applied to the children if `variant="text"` and `color="secondary"`.
| groupedOutlined | .MuiButtonGroup-groupedOutlined | Styles applied to the children if `variant="outlined"`.
| groupedOutlinedHorizontal | .MuiButtonGroup-groupedOutlinedHorizontal | Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`.
| groupedOutlinedVertical | .MuiButtonGroup-groupedOutlinedVertical | Styles applied to the children if `variant="outlined"` and `orientation="vertical"`.
| groupedOutlinedPrimary | .MuiButtonGroup-groupedOutlinedPrimary | Styles applied to the children if `variant="outlined"` and `color="primary"`.
| groupedOutlinedSecondary | .MuiButtonGroup-groupedOutlinedSecondary | Styles applied to the children if `variant="outlined"` and `color="secondary"`.
| groupedContained | .MuiButtonGroup-groupedContained | Styles applied to the children if `variant="contained"`.
| groupedContainedHorizontal | .MuiButtonGroup-groupedContainedHorizontal | Styles applied to the children if `variant="contained"` and `orientation="horizontal"`.
| groupedContainedVertical | .MuiButtonGroup-groupedContainedVertical | Styles applied to the children if `variant="contained"` and `orientation="vertical"`.
| groupedContainedPrimary | .MuiButtonGroup-groupedContainedPrimary | Styles applied to the children if `variant="contained"` and `color="primary"`.
| groupedContainedSecondary | .MuiButtonGroup-groupedContainedSecondary | Styles applied to the children if `variant="contained"` and `color="secondary"`.
You can override the style of the component thanks to one of these customization points:
- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
- With a theme and an [`overrides` property](/customization/globals/#css).
If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ButtonGroup/ButtonGroup.js) for more detail.
## Demos
- [Button Group](/components/button-group/)