Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
110 views4 pages

React Button Group Component - Material UI

The document discusses the ButtonGroup component in Material UI, which can be used to group related buttons. It describes how buttons can be wrapped in a ButtonGroup to create a basic button group. All standard button variants like contained, outlined and text are supported. Additional props like size, color, and orientation can control the appearance of the button group. The ButtonGroup can also be used to create a split button with a dropdown.

Uploaded by

aaa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
110 views4 pages

React Button Group Component - Material UI

The document discusses the ButtonGroup component in Material UI, which can be used to group related buttons. It describes how buttons can be wrapped in a ButtonGroup to create a basic button group. All standard button variants like contained, outlined and text are supported. Additional props like size, color, and orientation can control the appearance of the button group. The ButtonGroup can also be used to create a split button with a dropdown.

Uploaded by

aaa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

06/10/2022, 09:56 React Button Group component - Material UI

Edit this page

Button Group
The ButtonGroup component can be used to group related buttons.

Premium Templates. Start your project with the best templates for
admins, dashboards, and more.
ad by MUI

Feedback Bundle size Figma Adobe Sketch

Basic button group


The buttons can be grouped by wrapping them with the ButtonGroup component.
They need to
be immediate children.

ONE TWO THREE

<ButtonGroup variant="contained" aria-label="outlined primary button group">


<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>

Button variants
All the standard button variants are supported.

ONE TWO THREE

https://mui.com/material-ui/react-button-group/ O O 1/4
06/10/2022, 09:56 React Button Group component - Material UI
ONE TWO THREE

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

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>

Vertical group
The button group can be displayed vertically using the orientation prop.

ONE ONE ONE


https://mui.com/material-ui/react-button-group/ 2/4
06/10/2022, 09:56 React Button Group component - Material UI
ONE ONE ONE

TWO TWO TWO

THREE THREE THREE

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.

SQUASH AND MERGE

Disabled elevation
You can remove the elevation with the disableElevation prop.

ONE TWO

<ButtonGroup
disableElevation
variant="contained"
aria-label="Disabled elevation buttons"
>
<Button>One</Button>
<Button>Two</Button>
</ButtonGroup>

API
<Button />
<ButtonGroup />

https://mui.com/material-ui/react-button-group/ 3/4
06/10/2022, 09:56 React Button Group component - Material UI

Button Checkbox

Was this page helpful?

https://mui.com/material-ui/react-button-group/ 4/4

You might also like