how to create mui button with loading in react js?
December 12, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To create mui button with loading in React js, use <Button variant="contained" onClick={handleClick} >{loading ? "Loading..." : "Click me"}</Button>;
. It will create mui button with loading.
Today, I am going to show you, how to create mui button with loading in react js.
Installation
Install the following packages to use mui button with loading in react js.
npm
npm install @mui/material @emotion/react @emotion/styled
yarn
yarn add @mui/material @emotion/react @emotion/styled
MUI material create mui button with loading example.
The below code is an example of created mui button with loading using mui.
App.js
import * as React from 'react';
import Button from '@mui/material/Button';
import "./App.css"
export default function BasicButtons() {
const [loading, setLoading] = React.useState(false);
const handleClick = () => {
setLoading(true);
// Perform a long-running operation here, then set loading to false when it is finished
setTimeout(() => setLoading(false), 3000);
};
return <Button variant="contained" onClick={handleClick} >{loading ? "Loading..." : "Click me"}</Button>;
}
In the above code example, I have used the @mui/material
component and created mui button with the loading of MUI.
Check the output of the above code example.
All the best 👍