How to create loading buttons in Material UI?

The loading buttons, or simply the spinners that are used in the buttons, are a way to demonstrate that the state of a component is being loaded. The loading button can be used to display the progress of your projects as they load. They are solely made of Material UI, so your application will not require the use of any other libraries. Specific utility classes can be used to easily customize their shape, size, and alignment.

In this article, we are going to learn how to create loading 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 loading buttons.

What is a lab in Material UI?

The lab in Material UI is a package that consists of the incubator components that are not deployed or published to be actually used, or those that are not ready to move to the core. The way that the components are versioned distinguishes the lab from the core. When necessary, we can release breaking changes thanks to the existence of a separate lab package, whereas the core package adheres to a slower−moving policy.

The Lab package consists of an API called LoadingButton that is used for creating loading buttons in Material UI, which have loading states and other features.

Loading Button API

• <LoadingButton> − The LoadingButton API is used to create loading buttons that show the loading state and disable interactions.

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.

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

• loading − This prop is used to show the indicator when true.

• loadingIndicator − This prop is used to place the element before the children if the button is in a loading state.

• loadingPosition − This prop is used to position the loading indicator either at the start, end, or center of the button.

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

Syntax

import LoadingButton from '@mui/lab/LoadingButton';

// or

import { LoadingButton } from '@mui/lab';

Steps to create complex buttons

Below are the complete steps for creating loading 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 3: Install Lab package

Once the React app is created, it's time to install the Lab package. The lab package consists of the components that haven’t been deployed for final use. Below is how to import the Lab package −

import { LoadingButton } from "@mui/lab";

Step 4: 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 5: Import the Loading component

Once, we have defined the new component, it's time to import the Loading component from the Lab package. The Loading component is helpful because states like loading, etc. are available to be used for creating loading buttons in Material U. Below is the syntax for how to import a loading button component −

import LoadingButton from '@mui/lab/LoadingButton';

Step 6: Use the LoadingButton component

Now, below is how we use the LoadingButton component in React using Material UI. The loading button component of the 'LabButton' package is created for easy implementation with built−in load state management and visual feedback.

Later, we’ll explore some examples that use the LoadingButton component in creating loading buttons.

<ButtonBase>
   …
</ButtonBase>

Example

This is a very basic example demonstrating the usage of different styles of loading buttons in Material UI. We have added three buttons that show different loading styles, in the first one, there is no label, in the second, there is only a label, and in the third, the spinner is showing along with the label.

import React from "react";
import { LoadingButton } from "@mui/lab";
import Search from '@mui/icons-material/Search';

export default function App() {
   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <LoadingButton loading variant="contained">
            Hello
         </LoadingButton>
         <LoadingButton loading loadingIndicator="Searching..." variant="outlined">
            Searching
         </LoadingButton>
         <LoadingButton loading loadingPosition="start" variant="contained" startIcon={<Search />}>
            Searching
         </LoadingButton>
      </div>
   );
}

Output

Example

In this example, we have created a loading button that is controlled by the useState hook. Whenever the user clicks the button the state will change to the loading state enabling the button to add a spinner while loading.

import React, { useState } from "react";
import { LoadingButton } from "@mui/lab";
import Search from "@mui/icons-material/Search";

export default function App() {
   const [btnLoading, setBtnLoading] = useState(false);

   function handleButtonClick() {
      setBtnLoading(true);
   }
   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <LoadingButton
            loadingPosition="start"
            variant="contained"
            loading={btnLoading}
            startIcon={<Search />}
            onClick={handleButtonClick}>
            Search
         </LoadingButton>
      </div>
   );
}

Output

Example

In this example, we have added multiple loading buttons that are controlled by the FormControlLabel and checkbox. Whenever the checkbox is checked, all the button states will change to the loading state. Also, some icons are used in the buttons with the help of the startIcon prop.

import React, { useState } from "react";
import LoadingButton from '@mui/lab/LoadingButton';
import { Search, Send } from '@mui/icons-material';
import { FormControlLabel, Checkbox } from "@mui/material";

export default function App() {
   const [btnLoading, setBtnLoading] = useState(true);
   function handleBtn() {
      setBtnLoading(true);
   }
   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <FormControlLabel
            label="Load the state"
            control={
               <Checkbox
                  checked={btnLoading}
                  onChange={() => setBtnLoading(!btnLoading)}
                  name="btn-load"
               />
            }
         />
         <div style={{ display: 'flex', gap: 10}}>
            <LoadingButton
               size="large"
               variant="contained"
               onClick={handleBtn}
               loading={btnLoading}
               color="success">
               disabled Load
            </LoadingButton>
            <LoadingButton
               size="large"
               variant="outlined"
               color="success"
               loading={btnLoading}
               loadingIndicator="Load"
               onClick={handleBtn}
               disabled>
               Load
            </LoadingButton>
            <LoadingButton
               size="large"
               variant="contained"
               color="success"
               endIcon={<Search />}
               onClick={handleBtn}
               loading={btnLoading}
               loadingPosition="end">
               Search
            </LoadingButton>
            <LoadingButton
               size="large"
               color="success"
               onClick={handleBtn}
               loading={btnLoading}
               loadingPosition="start"
               startIcon={<Send />}
               variant="outlined">
               Send
            </LoadingButton>
         </div>
      </div>
   );
}

Output

Conclusion

In this article, we learned how to create loading buttons in Material UI. Creating loading buttons can be a very task especially when there is a library called Lab available in Material UI.

But if the demands of your project call for more sophisticated loading buttons or additional features, you can build your own custom components or look into other publicly available libraries or outside packages that might offer more specialized loading button functionalities.