How to create complex buttons in Material UI?

Within web applications, buttons are essential for enabling user engagement. Sometimes we are in need of providing custom interaction to the users using their applications or websites. You can create complex buttons with cutting−edge features, unique styles, and interactive behavior in addition to the simple buttons with standard features that Material UI offers. To provide the custom interaction in the buttons, we can use a really cool API given in the Material UI, i.e., the ButtonBase component API.

In this article, we are going to learn how to create complex buttons in Material UI. Before going further in the article, we need to create a react project and also install the Material UI into it. So, let’s start and see the complete process of creating complex buttons.

Steps to create complex buttons

Below are the complete steps for creating complex buttons in Material UI using React −

Step 1: Create a new react app and Install MUI

To begin with, 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 ButtonBase component

Once, we have defined the new component, it's time to import the ButtonBase component. The ButtonBase component is very important because all the button components in Material UI are built on this component. Below is the syntax for how to import a button group −

import ButtonBase from "@mui/material/ButtonBase";

Step 4: Use the ButtonBase component

Now, below is how we use the ButtonBase component in React using Material UI. In this code, the styles are not applied yet. Later, we’ll explore some examples that use custom styles for creating complex custom buttons.

<ButtonBase>
   …
</ButtonBase>

API

• <ButtonBase> − The ButtonBase API is used in developing custom buttons as it provides us a building block for the creation of our new modified buttons. The component consists of a load of style resets along with the logic to build buttons.

Props

• action − This prop is used for imperative actions only with focusVisible action.

• centerRipple − This prop is used to center the ripple, when true.

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

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

• component − This prop is used to create a new component as the root node.

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

• disabledRipple − This prop is used to disable a ripple.

• focusRipple − This prop is used to focus a keyboard ripple in a base button when true.

• LinkComponent − This prop is used to render a link when there is href attribute given.

• onFocusVisible − This prop is a callback function used to trigger a callback when the component is focused with a keyboard.

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

• touchRippleRef − This prop acts as ref which is used in pointing to the TouchRipple element.

Example

In this example, we have created a custom, complex button with the help of the ButtonBase component API. This is a very basic example where the button has some custom styles like background color, color, padding, etc., which are defined using the sx prop. The button when clicked takes the user to the url which is defined in the href prop.

import React from "react";
import ButtonBase from "@mui/material/ButtonBase";

export default function App() {
   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <ButtonBase
            href="https://www.tutorialspoint.com"
            aria-label="complex button"
            sx={{
               backgroundColor: "green",
               color: "white",
               paddingX: 20,
               paddingY: 5,
               borderRadius: 4,
               fontSize: 40,
               "&:hover": {
                  backgroundColor: "#189E02",
               },
            }}>
            Access
         </ButtonBase>
      </div>
   );
}

Output

Example

In this example, we have created a custom, complex button with the help of the ButtonBase component API. There are three buttons created, in which the background image and labels for the same are defined in the data as arrays. Then we have first defined the custom button component using the ButtonBase component with some width, height, and hover styles. To have a good user experience, the backdrop opacity is also added with some custom styles. After defining all styles, we next used the map() function to add multiple buttons, where the <CustomButton> has been used as the root for all other components defined earlier like ImageSrc, OpacityDrop, etc.

import React from "react";
import { styled } from "@mui/material/styles";
import ButtonBase from "@mui/material/ButtonBase";

const data = [
   {
      img_url:
      "https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg",
      img_label: "HTML&CSS basics",
   },
   {
      img_url:
      "https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png",
      img_label: "Python for Beginners",
   },
   {
      img_url:
      "https://d3mxt5v3yxgcsr.cloudfront.net/courses/3187/course_3187_image.jpg",
      img_label: "Blockchain",
   },
];

const CustomButton = styled(ButtonBase)({
   position: "relative",
   height: 300,
   width: 500,
   "&:hover, &.Mui-focusVisible": {
      zIndex: 1,
      "& .MuiImageBackdrop-root": {
         opacity: 0.2,
      },
      "& .MuiImageMarked-root": {
         opacity: 0,
      },
   },
});

const ImageSrc = styled("span")({
   position: "absolute",
   left: 0,
   right: 0,
   top: 0,
   bottom: 0,
   backgroundSize: "cover",
   backgroundPosition: "center 40%",
});

const OpacityDrop = styled("span")({
   position: "absolute",
   left: 0,
   right: 0,
   top: 0,
   bottom: 0,
   backgroundColor: "black",
   opacity: 0.4,
});

export default function App() {
   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         {data.map((image) => ( //mapping custom button to have multiple buttons
            <CustomButton
               key={image.img_label}
               style={{
                  width: image.width,
               }}
            >
               {/* adding url of the images, backdrop , and text with custom styles */}
               <ImageSrc style={{ backgroundImage: `url(${image.img_url})` }} />
               <OpacityDrop className="root" />
               <img
                  alt="images"
                  style={{
                     position: "absolute",
                     left: 0,
                     right: 0,
                     top: 0,
                     bottom: 0,
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center"
                  }}
               />
               <h1
                  style={{
                     position: "relative",
                     p: 4,
                     pt: 2,
                     color: "white",
                  }}>
                  {image.img_label}
               </h1>
            </CustomButton>
         ))}
      </div>
   );
}

Output

In the example, when the user clicks the button, a backdrop is enabled, and the user gets a good experience using the buttons.

Conclusion

In this article, we looked at how to create complex buttons in Material UI using React. By adding sophisticated features, our own custom styles, and an interactive user experience to the applications, we can create complex buttons with the help of Material UI. We can create interactive, rich buttons that adhere to your design specifications by combining different elements, and styles. We saw the complete steps to create the custom buttons with complex functionalities and features. Apart from the above, we also saw some examples that demonstrate how to use the ButtonBase API component to create custom buttons.