Open In App

React MUI ButtonGroup API

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads