ButtonGroup API
API documentation for the React ButtonGroup component. Learn about the available props, and the CSS API.
Import
import ButtonGroup from '@material-ui/core/ButtonGroup';
// or
import { ButtonGroup } from '@material-ui/core';Component name
The nameMuiButtonGroup can be used when providing default props or style overrides in the theme.Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | The content of the component. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| color | 'inherit' | 'primary' | 'secondary' | string | 'primary' | The color of the component. It supports those theme colors that make sense for this component. |
| component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
| disabled | bool | false | If true, the component is disabled. |
| disableElevation | bool | false | If true, no elevation is used. |
| disableFocusRipple | bool | false | If true, the button keyboard focus ripple is disabled. |
| disableRipple | bool | false | If true, the button ripple effect is disabled. |
| fullWidth | bool | false | If true, the buttons will take up the full width of its container. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | The component orientation (layout flow direction). |
| size | 'large' | 'medium' | 'small' | 'medium' | The size of the component. small is equivalent to the dense button styling. |
| sx | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| variant | 'contained' | 'outlined' | 'text' | string | '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". |
| outlined | .MuiButtonGroup-outlined | Styles applied to the root element if variant="outlined". |
| text | .MuiButtonGroup-text | Styles applied to the root element if variant="text". |
| disableElevation | .MuiButtonGroup-disableElevation | Styles applied to the root element if disableElevation={true}. |
| disabled | .Mui-disabled | Pseudo-class applied to the 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 using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.