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" , }} > w3wiki </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" , }} > w3wiki </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/