React MUI ButtonGroup API
Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top of Material Design by Google. In this article let’s discuss the ButtonGroup API in the Material-UI library.
The ButtonGroup API of MUI is used to wrap related buttons together inside a single container.
ButtonGroup props:
- children: It denotes the content of the component
- classes: It denotes the styles to override the default ones.
- color: It denotes the color of the component
- component: It denotes the component used for the root node
- disabled: It determines whether the component is disabled
- disableElevation: It determines whether the elevation is used or not
- disableFocusRipple: It determines whether the ripple is disabled when the component is focused using the keyboard
- disableRipple: It determines whether the ripple animation is disabled
- fullWidth: It determines whether the button will take up the full width of the container
- orientation: It denotes the orientation of the component
- size: It denotes the size of the component
- sx: It denotes a system prop that allows defining system overrides and additional CSS styles.
- variant: It denotes the variant of the component
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material
Project Structure: It will look like the following.
Example 1: In this example, we will try to create a simple application that uses ButtonGroup component to wrap 3 buttons together inside it.
Now write down the following code in the App.js file. Here, App is our default component where we have written our code:
App.js
import * as React from 'react' ;
import Button from '@mui/material/Button' ;
import ButtonGroup from '@mui/material/ButtonGroup' ;
export default function BasicButtonGroup() {
return (
<div>
<div
className= "head"
style={{
width: "fit-content" ,
margin: "auto" ,
}}
>
<h1
style={{
color: "green" ,
}}
>
GeeksforGeeks
</h1>
<strong>React MUI ButtonGroup API</strong>
<br />
<br />
</div>
<div
style={{
width: "fit-content" ,
margin: "auto" ,
}}
>
<ButtonGroup style={{ margin: "auto" }}
variant= "contained"
aria-label= "outlined primary button group" >
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
</div>
</div>
);
}
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: In this example, let’s create a simple application that uses ButtonGroup component to wrap 3 different buttons together, but with different orientation. Change your App.js like the one below.
App.js
import * as React from 'react' ;
import Button from '@mui/material/Button' ;
import ButtonGroup from '@mui/material/ButtonGroup' ;
export default function BasicButtonGroup() {
return (
<div>
<div
className= "head"
style={{
width: "fit-content" ,
margin: "auto" ,
}}
>
<h1
style={{
color: "green" ,
}}
>
GeeksforGeeks
</h1>
<strong>React MUI ButtonGroup API</strong>
<br />
<br />
</div>
<div
style={{
width: "fit-content" ,
margin: "auto" ,
}}
>
<ButtonGroup orientation= 'vertical'
variant= "contained"
aria-label= "outlined primary button group" >
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
</div>
</div>
);
}
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Reference: https://mui.com/material-ui/api/button-group/
Last Updated :
14 Oct, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...