Open In App

React MUI ToggleButton API

Improve
Improve
Like Article
Like
Save
Share
Report

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.

  • children (node): It is a component similar to the table row.
  • classes (Object): Override the existing styles or add new styles to the component.
  • component (elementType): It is the component used for the root node. It can be either an HTML string or a component.
  • sx (Array<func / object/bool> / func / object): The system prop allows defining system overrides as well as additional CSS styles
  • value (any): The value associated with the button when you select it in togglebuttongroup.
  • color (standard/primary/secondary/error/info/success/warning/string): The colour of the ToggleButton.
  • disabled (true/false): If set to true, the toggle button is disabled.
  • disableFocusRipple (true/false): If set to true, the keyboard focus ripple is disabled.
  • fullWidth (true/false): If set to true, the toggle button will take the full width of the container.
  • onChange (function): The callback function when the toggle button is changed.
  • onClick (function): The callback function when the toggle button is clicked.
  • selected (true/false): If set to true, the button is in the active state.
  • size (small/medium/large/string): Specifies the size of the button.
  • sx (Array<func / object / bool> / func / object): The system prop allows defining system overrides as well as additional CSS styles.

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.

App.js




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.

App.js




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/



Last Updated : 03 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads