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/
