React MUI LoadingButton API

Material UI is an open-source design framework that showcases different components made in react. It is developed and maintained by Google since 2014.

What is the LoadingButton API offered by Material UI?

The LoadingButton API, provided by MUI, are similar to the Button API provided by MUI and they also provide a loading state and disable button feature.

Syntax:

<LoadingButton> This ia a Loading Button </LoadingButton> 

LoadingButton Props:

• children: It denotes the content of the LoadingButton component
• classes: It denotes the styles applied to the component, overriding the default styles that are applied to it.
• disabled: It determines whether the component is disabled
• loading: It determines whether the loading indicator should be shown in the component
• loadingIndicator: It denotes the element placed before children when the component is in a loading state
• loadingPosition: It denotes the loading indicator position in the component
• sx: It denotes the additional CSS styles that override the default system styles
• variant: It denotes the variant for the button component

Creating React Application And Installing Module

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material
npm install @mui/system
npm install @mui/lab
npm install @mui/icons-material

Project Structure:  It will look like the following.

Example 1: Now, let’s create a simple application that utilizes the LoadingButton API by creating different buttons, each having a loading prop set to true but having different loadingIndicator prop. Change your App.js like below:

App.js

import * as React from 'react';
import LoadingButton from '@mui/lab/LoadingButton';
import SaveIcon from '@mui/icons-material/Save';
import { Grid } from '@mui/material';

export default function App() {
    return (
        <Grid container gap={2}>
            <LoadingButton loading variant="outlined">
                Loading
            </LoadingButton>
            <LoadingButton loading
                loadingIndicator="Loading"
                variant="outlined">
                Loading
            </LoadingButton>
            <LoadingButton
                loading
                loadingPosition="start"
                startIcon={<SaveIcon />}
                variant="outlined"
            >
                Loading
            </LoadingButton>
        </Grid>
    );
}

Step to run the application: Open the terminal and type the following command.

npm start

Output:

Example 2: Now,  let’s create different buttons with a controlled loading state. Here, the state of the loading of buttons will be controlled by a toggle. Change your App.js like below:

App.js

import * as React from 'react';
import LoadingButton from '@mui/lab/LoadingButton';
import Box from '@mui/material/Box';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import SaveIcon from '@mui/icons-material/Save';
import SendIcon from '@mui/icons-material/Send';

export default function App() {
    const [loading, setLoading] = React.useState(true);
    function handleClick() {
        setLoading(true);
    }

    return (
        <Box>
            <FormControlLabel
                sx={{
                    display: 'block',
                }}
                control={
                    <Switch
                        checked={loading}
                        onChange={() => setLoading(!loading)}
                        name="loading"
                        color="primary"
                    />
                }
                label="Loading"
            />
            <Box sx={{ '& > button': { m: 1 } }}>
                <LoadingButton
                    size="small"
                    onClick={handleClick}
                    loading={loading}
                    variant="outlined"
                    disabled
                >
                    disabled
                </LoadingButton>
                <LoadingButton
                    size="small"
                    onClick={handleClick}
                    loading={loading}
                    loadingIndicator="Loading…"
                    variant="outlined"
                >
                    Fetch data
                </LoadingButton>
                <LoadingButton
                    size="small"
                    onClick={handleClick}
                    endIcon={<SendIcon />}
                    loading={loading}
                    loadingPosition="end"
                    variant="contained"
                >
                    Send
                </LoadingButton>
                <LoadingButton
                    size="small"
                    color="secondary"
                    onClick={handleClick}
                    loading={loading}
                    loadingPosition="start"
                    startIcon={<SaveIcon />}
                    variant="contained"
                >
                    Save
                </LoadingButton>
            </Box>

            <Box sx={{ '& > button': { m: 1 } }}>
                <LoadingButton
                    onClick={handleClick}
                    loading={loading}
                    variant="outlined"
                    disabled
                >
                    disabled
                </LoadingButton>
                <LoadingButton
                    onClick={handleClick}
                    loading={loading}
                    loadingIndicator="Loading…"
                    variant="outlined"
                >
                    Fetch data
                </LoadingButton>
                <LoadingButton
                    onClick={handleClick}
                    endIcon={<SendIcon />}
                    loading={loading}
                    loadingPosition="end"
                    variant="contained"
                >
                    Send
                </LoadingButton>
                <LoadingButton
                    color="secondary"
                    onClick={handleClick}
                    loading={loading}
                    loadingPosition="start"
                    startIcon={<SaveIcon />}
                    variant="contained"
                >
                    Save
                </LoadingButton>
            </Box>
        </Box>
    );
}

Step to run the application: Open the terminal and type the following command.

npm start

Output:

Reference: https://mui.com/material-ui/api/loading-button/