Button Group The ButtonGroup component can be used to group related buttons.
The buttons can be grouped by wrapping them with the ButtonGroup
component.
They need to be immediate children.
< ButtonGroup variant = " contained" aria-label = " outlined primary button group" >
< Button > One</ Button >
< Button > Two</ Button >
< Button > Three</ Button >
</ ButtonGroup > Press Enter to start editing
Copy (Or Ctrl + C) All the standard button variants are supported.
< ButtonGroup variant = " outlined" aria-label = " outlined button group" >
< Button > One</ Button >
< Button > Two</ Button >
< Button > Three</ Button >
</ ButtonGroup >
< ButtonGroup variant = " text" aria-label = " text button group" >
< Button > One</ Button >
< Button > Two</ Button >
< Button > Three</ Button >
</ ButtonGroup > Press Enter to start editing
Copy (Or Ctrl + C) Sizes and colors The size
and color
props can be used to control the appearance of the button group.
One Two Three
One Two Three
One Two Three
< ButtonGroup size = " small" aria-label = " small button group" >
{ buttons}
</ ButtonGroup >
< ButtonGroup color = " secondary" aria-label = " medium secondary button group" >
{ buttons}
</ ButtonGroup >
< ButtonGroup size = " large" aria-label = " large button group" >
{ buttons}
</ ButtonGroup > Press Enter to start editing
Copy (Or Ctrl + C) Vertical group The button group can be displayed vertically using the orientation
prop.
One Two Three
One Two Three
One Two Three
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.
Disabled elevation You can remove the elevation with the disableElevation
prop.
< ButtonGroup
disableElevation
variant = " contained"
aria-label = " Disabled elevation buttons"
>
< Button > One</ Button >
< Button > Two</ Button >
</ ButtonGroup > Press Enter to start editing
Copy (Or Ctrl + C)