Open In App

React MUI ToggleButton API

MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google. 

In this article, we are going to discuss the React MUI ToggleButton API. ToggleButtons are used to group related options. The ToggleButton API provides a lot of customizations like styling, functionality, etc. ToggleButtons let us select either a single or multiple options. ToggleButtons can consist of two or more options.



Import ToggleButton API

import ToggleButton from '@mui/material/ToggleButton';
// or
import { ToggleButton } from '@mui/material';

Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.



Syntax: Create a ToggleButton component as follows:

<ToggleButton value="gfg">
    Click Here
</ToggleButton>

Installing and Creating React app, and adding the MUI dependencies.

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

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

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have options from the toggle button group.




import "./App.css";
import * as React from "react";
  
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import { useState } from "react";
  
function App() {
  const [alignment, setAlignment] = useState();
  
  const handleAlignment = (event, newAlignment) => {
    setAlignment(newAlignment);
  };
  return (
    <div className="App">
      <div
        className="head"
        style={{
          width: "fit-content",
          margin: "auto",
        }}
      >
        <h1
          style={{
            color: "green",
          }}
        >
          GeeksforGeeks
        </h1>
        <strong>React MUI ToggleButton API</strong>
        <br />
        <br />
      </div>
      <div
        style={{
          width: "fit-content",
          margin: "auto",
        }}
      >
        <ToggleButtonGroup
          value={alignment}
          exclusive
          onChange={handleAlignment}
          aria-label="text alignment"
        >
          <ToggleButton value="Data Structures" 
            aria-label="left aligned">
            Data Structures
          </ToggleButton>
          <ToggleButton value="Algorithms" 
            aria-label="centered">
            Algorithms
          </ToggleButton>
          <ToggleButton value="Web Development" 
            aria-label="right aligned">
            Web Development
          </ToggleButton>
        </ToggleButtonGroup>
      </div>
    </div>
  );
}
  
export default App;

Output

 

Example 2: In the following example, we have the middle button with a disabled ripple.




import "./App.css";
import * as React from "react";
  
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import { useState } from "react";
  
function App() {
  const [alignment, setAlignment] = useState();
  
  const handleAlignment = (event, newAlignment) => {
    setAlignment(newAlignment);
  };
  return (
    <div className="App">
      <div
        className="head"
        style={{
          width: "fit-content",
          margin: "auto",
        }}
      >
        <h1
          style={{
            color: "green",
          }}
        >
          GeeksforGeeks
        </h1>
        <strong>React MUI ToggleButton API</strong>
        <br />
        <br />
      </div>
      <div
        style={{
          width: "fit-content",
          margin: "auto",
        }}
      >
        <ToggleButtonGroup
          value={alignment}
          exclusive
          onChange={handleAlignment}
          aria-label="text alignment"
        >
          <ToggleButton value="Data Structures" 
            aria-label="left aligned">
            Data Structures
          </ToggleButton>
          <ToggleButton
            disableRipple="true"
            value="Algorithms"
            aria-label="centered"
          >
            Algorithms
          </ToggleButton>
          <ToggleButton value="Web Development" 
            aria-label="right aligned">
            Web Development
          </ToggleButton>
        </ToggleButtonGroup>
      </div>
    </div>
  );
}
  
export default App;

Output

 

Reference: https://mui.com/material-ui/api/toggle-button/


Article Tags :