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.

Component name

The MuiButtonGroup name can be used for providing default props or style overrides 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 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 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.
orientation	'vertical' | 'horizontal'	'horizontal'	The group orientation.
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

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.
• 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

• Button Group