Split Button Groups in Material-UI

Material UI, also known as MUI is a frontend 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 stepbystep 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.