React MUI Button Group Input

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Button group Input. The ButtonGroup component is used to group the related buttons.

Button Group Types:

• Button variants: In this, all the standard button variants are supported.
• Sizes and colors:  We can use size and color props to control the appearance of the button group.
• Vertical group: The button group may be displayed vertically using the orientation prop.
• Split button: It can also be used to create a split button.
• Disabled elevation: The button group elevation can be disabled.

React MUI Button group Input 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 Project:

Step 1: To create a react app, you need to install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure:

Step to Run Application: Write the below step in the terminal to run the application:

npm start

Example 1: Below example demonstrates the React MUI button group variants of different sizes.

Javascript

import React from "react";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";

function App() {
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Button group Input</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <ButtonGroup variant="outlined"
                    aria-label="outlined button group" size="large">
                    <Button>Add</Button>
                    <Button>Delete</Button>
                    <Button>Edit</Button>
                </ButtonGroup>
                <ButtonGroup variant="text"
                    aria-label="text button group"
                    size="medium" style={{ marginLeft: 10 }}>
                    <Button>Add</Button>
                    <Button>Delete</Button>
                    <Button>Edit</Button>
                </ButtonGroup>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI vertical button group with disabled elevation.

Javascript

import React from "react";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";

function App() {
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Button group Input</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <ButtonGroup
                    variant="contained"
                    disableElevation
                    orientation="vertical"
                    aria-label="outlined button group"
                    size="large"
                >
                    <Button>Add</Button>
                    <Button>Delete</Button>
                    <Button>Edit</Button>
                </ButtonGroup>
            </div>
        </div>
    );
}

export default App;

Output:

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