How to split button groups in Material UI?

Material UI, also known as MUI is a front−end library developed by Google. It provides a collection of React components that can be utilized across frameworks, like React and NextJS. The Material UI library includes a component called "buttongroup," which allows for the grouping of two or more buttons. If we wish to separate these buttons, how can we achieve that? Utilizing the Button Group component enables us to create buttons well. Use a Dropdown menu to change the button's action, or you can use it for an immediate launch of related actions.

In React Material UI, it is entirely feasible to divide buttons into groups. In this article, we will explore a few methods that enable you to split button grouping in Material UI with React. Ensure a delightful user experience.

Steps to split a Button Group

Below are the complete steps for splitting a button group in Material UI using React −

Step 1: Create a new react app and Install MUI

To begin creating and splitting the button group, we first must have a React app with Material UI installed. Let’s create a new React app and install Mui by running the following command −

npx create-react-app myproject
cd myproject
npm install @mui/material @emotion/react @emotion/styled

Step 2: Define a React Component

Now, when the new React app is created, in the src folder there is a main App.js file. Open it, and add the below code −

import React from "react";

export default function App() {
   return (
      …
   )
}

Step 3: Import the Button Group Component

Once, we have defined the new component, it's time to import the button group component. Below is the syntax for how to import a button group −

import ButtonGroup from '@mui/material/ButtonGroup';
import Divider from '@mui/material/Divider;

Step 4: Split the ButtonGroup component

<ButtonGroup variant="contained">
   <Button>button 1</Button>
   <Button>button 2</Button>
   <Divider orientation="vertical" flexItem />
   <Button>button 3</Button>
   <Button>button 4</Button>
   …
</ButtonGroup>

So, far now we have learned the step−by−step process for splitting a button group with a common and easiest approach. Now let’s see some examples for splitting a button group with different approaches.

ButtonGroup API

• <ButtonGroup> − The button group API or component is used to group related buttons having providing all props as discussed below.

Props

• children − This prop determines the content of the component.

• classes − This prop is used to provide custom classes that can be used to override the styles.

• color − This prop is used to change the colors.

• disabled − This prop is used to disable a component.

• disableRipple −This prop is used to disable the ripple effect.

• fullwidth − This prop is used to define the button group's full width.

• orientation − This prop is used to change the button group orientation.

• size − This prop is used to change the button group size.

• sx − This prop is used to add custom styles and also overrides the system CSS styles.

• variant − This prop is used to change the button group variants like contained, outlined, and text.

Approach 1: Adding <Divider>

Example

import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import { Divider } from "@mui/material";

export default function App() {
   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10
         }}>
         <ButtonGroup size="medium" variant="contained">
            <Button>Button 1</Button>
            <Divider orientation="vertical" />
            <Button>Button 2</Button>
            <Divider orientation="vertical" />
            <Button>Button 3</Button>
         </ButtonGroup>
      </div>
   );
}

Output

Approach 2: Adding Dropdowns

Another approach is to use dropdowns in splitting button groups. The dropdown can change the button action or be used to immediately trigger a related action. In this approach, we are going to use the

Example

The below example demonstrates the splitting of the button group.

import React from "react";
import { Button, ButtonGroup } from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ClickAwayListener from "@mui/material/ClickAwayListener";
import Grow from "@mui/material/Grow";
import Popper from "@mui/material/Popper";
import MenuItem from "@mui/material/MenuItem";
import MenuList from "@mui/material/MenuList";
import { useRef } from "react";
import { useState } from "react";

export default function App() {
   const listItems = [
      "Java",
      "Python",
      "C++"
   ];
   const arRef = useRef(null);
   const [popperOpen, setPopperOpen] = useState(false);
   const [selId, setSelId] = useState(1);

   const handleItemPress = (e, index) => {
      setSelId(index);
      setPopperOpen(false);
   };

   const handleClose = (e) => {
      if (arRef.current && arRef.current.contains(e.target)) {
         return;
      }
      setPopperOpen(false);
   };

   const handleOpen = () => {
      setPopperOpen((prevOpen) => !prevOpen);
   };

   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <ButtonGroup
            variant="contained"
            color="info"
            ref={arRef}>
            <Button>{listItems[selId]}</Button>
            <Button
               size="medium"
               onClick={handleOpen}>
               <ArrowDropDownIcon />
            </Button>
         </ButtonGroup>
         <Popper
            transition
            open={popperOpen}
            anchorEl={arRef.current}>
            {({ TransitionProps }) => (
               <Grow
                  {...TransitionProps}
               >
                  <div style={{backgroundColor: 'lightblue', colro: 'white', padding: 2}}>
                     <ClickAwayListener onClickAway={handleClose}>
                        <MenuList id="split-button-menu">
                           {listItems.map((item, i) => (
                              <MenuItem
                                 key={item}
                                 onClick={(e) => handleItemPress(e, i)}>
                                 {item}
                              </MenuItem>
                           ))}
                        </MenuList>
                     </ClickAwayListener>
                  </div>
               </Grow>
            )}
         </Popper>
      </div>
   );
}

Output

Example

The below example demonstrates the splitting of the button group on hover.

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

import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ClickAwayListener from "@mui/material/ClickAwayListener";
import Grow from "@mui/material/Grow";
import Popper from "@mui/material/Popper";
import MenuItem from "@mui/material/MenuItem";
import MenuList from "@mui/material/MenuList";
import { useRef } from "react";
import { useState } from "react";

export default function App() {
   const listItems = ["Java", "Python", "C++"];

   const arRef = useRef(null);
   const popperTimerRef = useRef(null);
   const [hoverPopper, setHoverPopper] = useState(false);
   const [selId, setSelId] = useState(1);

   const handleItemPress = (e, index) => {
      setSelId(index);
      setHoverPopper(false);
   };

   const handleClose = (e) => {
         if (arRef.current && arRef.current.contains(e.target)) {
         return;
      }
      setHoverPopper(false);
   };

   const handleHoverOpen = () => {
      setHoverPopper(true);
   };

   const handleHoverEnter = () => {
      popperTimerRef.current = setTimeout(() => {
         setHoverPopper(true);
      }, 100); 
   };

   const handleHoverClose = () => {
      clearTimeout(popperTimerRef.current);
      setHoverPopper(false);
   };

   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <ButtonGroup variant="contained" color="info" ref={arRef}>
            <Button>{listItems[selId]}</Button>
            <Button
               size="medium"
               onClick={handleHoverOpen}
               onMouseEnter={handleHoverEnter}
               onMouseLeave={handleHoverClose}>
               <ArrowDropDownIcon />
            </Button>
         </ButtonGroup>
         <Popper transition open={hoverPopper} anchorEl={arRef.current}>
            {({ TransitionProps }) => (
               <Grow {...TransitionProps}>
                  <div
                     style={{
                        backgroundColor: "lightblue",
                        color: "blue",
                     }}>
                     <ClickAwayListener onClickAway={handleClose}>
                        <MenuList id="split-button-menu">
                           {listItems.map((item, i) => (
                              <MenuItem key={item} onClick={(e) => handleItemPress(e, i)}>
                                 {item}
                              </MenuItem>
                           ))}
                        </MenuList>
                     </ClickAwayListener>
                  </div>
               </Grow>
            )}
         </Popper>
      </div>
   );
}

Output

Conclusion

In order to create a user interface that is visually distinct and organised, we have examined how to split buttons groups in the Material UI. In order to achieve the desired split button group effect, it is very simple to use dividers or custom styles. In React based projects, Material User Interface's flexibility and a large set of components allow us to create attractive and functional UI elements. In order to enhance your user experience, this knowledge will enable you to design and implement split button groups with confidence.