ButtonGroup API

The API documentation of the ButtonGroup React component. Learn more about the props and the CSS customization points.

Import

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.

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 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 DOM element or a component.
disabled	bool	false	If `true`, the buttons will be disabled.
disableFocusRipple	bool	false	If `true`, the button keyboard focus ripple will be disabled. `disableRipple` must also be true.
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.
size	'small' \| 'medium' \| 'large'	'medium'	The size of the button. `small` is equivalent to the dense button styling.
variant	'text' \| 'outlined' \| 'contained'	'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

Style sheet name: MuiButtonGroup.
Style sheet details:

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"`.
fullWidth	.MuiButtonGroup-fullWidth	Styles applied to the root element if `fullWidth={true}`.
grouped	.MuiButtonGroup-grouped	Styles applied to the children.
groupedText	.MuiButtonGroup-groupedText	Styles applied to the children if `variant="text"`.
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"`.
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"`.
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"`.
disabled	.Mui-disabled	Pseudo-class applied to child elements if `disabled={true}`.

You can override the style of the component thanks to one of these customization points:

With a rule name of the classes object prop.
With a global class name.
With a theme and an overrides property.

If that's not sufficient, you can check the implementation of the component for more detail.

Demos

Buttons