005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
57 lines
1.4 KiB
Markdown
57 lines
1.4 KiB
Markdown
---
|
|
productId: material-ui
|
|
title: React Button Group component
|
|
components: Button, ButtonGroup
|
|
githubLabel: 'component: ButtonGroup'
|
|
githubSource: packages/mui-material/src/ButtonGroup
|
|
---
|
|
|
|
# Button Group
|
|
|
|
<p class="description">The ButtonGroup component can be used to group related buttons.</p>
|
|
|
|
{{"component": "@mui/docs/ComponentLinkHeader"}}
|
|
|
|
## Basic button group
|
|
|
|
The buttons can be grouped by wrapping them with the `ButtonGroup` component.
|
|
They need to be immediate children.
|
|
|
|
{{"demo": "BasicButtonGroup.js"}}
|
|
|
|
## Button variants
|
|
|
|
All the standard button variants are supported.
|
|
|
|
{{"demo": "VariantButtonGroup.js"}}
|
|
|
|
## Sizes and colors
|
|
|
|
The `size` and `color` props can be used to control the appearance of the button group.
|
|
|
|
{{"demo": "GroupSizesColors.js"}}
|
|
|
|
## Vertical group
|
|
|
|
The button group can be displayed vertically using the `orientation` prop.
|
|
|
|
{{"demo": "GroupOrientation.js"}}
|
|
|
|
## Split button
|
|
|
|
`ButtonGroup` can also be used to create a split button. The dropdown can change the button action (as in this example) or be used to immediately trigger a related action.
|
|
|
|
{{"demo": "SplitButton.js"}}
|
|
|
|
## Disabled elevation
|
|
|
|
You can remove the elevation with the `disableElevation` prop.
|
|
|
|
{{"demo": "DisableElevation.js"}}
|
|
|
|
## Loading
|
|
|
|
Use the `loading` prop from `Button` to set buttons in a loading state and disable interactions.
|
|
|
|
{{"demo": "LoadingButtonGroup.js"}}
|