跳转到内容

🎉 v5 beta is out! Head to the v5 documentation to get started.

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 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:

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

Demos