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/