React MUI LoadingButton API
Last Updated :
26 Sep, 2022
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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...