Open In App

React Suite Loading Button

Last Updated : 11 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Button component is used to fire an action when the user clicks on it. 

In this article, we will be seeing React Suite Loading button. The loading button is used to give the virtual cue to the user that something is loading. To change a normal button to the Loading Button the loading property of the Button component is used.

React Suite Button Loading Components:

  • Button: This is the most basic button component used to display a simple button.

React Suite Button Loading Props:

  • loading: It is a boolean property of the Button component used to show a loading button.
  • color: This property of the Button component is used to change the color of the button. The color property can have any one of seven values: red, orange, yellow, green, cyan, blue, or violet.

Syntax:

<Button loading> ... </Button>

Note: The child component of the Button won’t be visible when the button is in a loading state.

Creating React Application And Installing Module:

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

npx create-react-app foldername

Step 2: Move to the newly created project folder using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module ( rsuite in this case ) using the following command:

npm install rsuite

Project Structure: After completing the above steps, the project structure will look like the following:

Project Structure

Example 1: Now write down the following code in the App.js file. Here, App is our default component. In this example, we used the loading property of the Button component to show the loading button.

Javascript




import React from "react";
import { Button } from "rsuite";
// Default CSS
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const ButtonStyle = { margin: "0px 20px" };
    return (
        <div className="App" style={{ textAlign: "center"
                                      padding: "0 30px" }}>
            <header style={{ display: "block"
                                       marginBottom: "20px" }}>
                <h3 style={{ color: "green" }}>
                    GeeksforGeeks</h3>
                <h5>React Suite Button Loading</h5>
            </header>
  
            <Button loading style={ButtonStyle}>
                Loading Button 1</Button>
            <Button loading appearance="primary" 
                style={ButtonStyle}>Loading Button 2</Button>
        </div >
    );
}
  
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

 

Example 2: In this example, we used the color property along with the loading property of the button to change the color of the Loading Button.

Javascript




import React from "react";
import { Button } from "rsuite";
// Default CSS
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const ButtonStyle = { margin: "10px 10px" };
    return (
        <div className="App" style={{ textAlign: "center"
                                      padding: "0 30px" }}>
            <header style={{ display: "block"
                                       marginBottom: "20px" }}>
                <h3 style={{ color: "green" }}>
                    GeeksforGeeks</h3>
                <h5>React Suite Button Loading - Color Variation</h5>
            </header>
  
            <Button loading color="red" appearance="primary" 
                            style={ButtonStyle}>
                Red Loading Button
            </Button>
            <Button loading color="violet" appearance="primary" 
                            style={ButtonStyle}>
                Violet Loading Button
            </Button>
            <Button loading color="green" appearance="primary" 
                            style={ButtonStyle}>
                Green Loading Button
            </Button>
            <Button loading color="yellow" appearance="primary" 
                            style={ButtonStyle}>
                Yellow Loading Button
            </Button>
            <br />
            <Button loading color="orange" appearance="primary" 
                            style={ButtonStyle}>
                Ornage Loading Button
            </Button>
            <Button loading color="blue" appearance="primary" 
                            style={ButtonStyle}>
                Blue Loading Button
            </Button>
            <Button loading color="cyan" appearance="primary" 
                            style={ButtonStyle}>
                Cyan Loading Button
            </Button>
        </div >
    );
}
  
export default App;


Output:

 

Reference: https://rsuitejs.com/components/button/#loading



Similar Reads

React Suite Chart Loading State
React Suite Charts is a popular front-end library with a set of React components that are used to provide a set of charts based on rsuite and echarts. The loading state is important which denotes whether the graph is in the loading state or not. We can use the following approach in ReactJS to use the loading state. Here we have used BarChart to dem
2 min read
How to show Page Loading div until the page has finished loading?
There are a lot of ways in which we can show a loading div but we have figured out the most optimal solution for you and that too in pure vanilla JavaScript. We will use the document.readyState property. When the value of this property changes, a readystatechange event fires on the document object. The document.readyState property can return these
2 min read
React animated loading/splash screen using 'react-spinners'
Displaying a loading or splash screen during response time from the server is an excellent way to interact with the user. But making a loading/splash screen becomes difficult when we want to practically use an animated loader, where we need to make extra efforts to write down its styling file. To overcome this problem, we use a bunch of predefined
2 min read
React Suite Dropdown Extends button props
A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React suite dropdown extended button props. As we know that the default value
4 min read
React Suite Button &lt;ButtonGroup&gt; Props
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Button component is used to fire an action when the user clicks the button. The ButtonGroup component is used to group the buttons together in a group. React Suite ButtonGroups Props: size: This property of
3 min read
React Suite Button ts:Color Props
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Button component is used to fire an action when the user clicks the button. ts:Color props are used to provide different colors to the Buttons. It provides different color options: 'red' | 'orange' | 'yellow
3 min read
React Suite Button Component
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Button Component allows the user to take actions, and make choices, with a single tap. We can use the following approach in ReactJS to use the React Suite Button Component. Button Props: active: It is used to ch
3 min read
React Suite Split Button
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Button Component allows the user to take actions, and make choices, with a single tap. There are different ways to define a button. A split button is used to make a button as a dropdown. There is a default optio
3 min read
React Suite Button Color
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Button component is used to fire an action when the user clicks the button. In this article, we will be discussing the React Suite Button Color. To change the color of the Button the color property is used.
3 min read
React Suite Button group
React Suite is a front-end library that consists of a set of React components that makes it easier for developers to build beautiful and responsive websites faster. In this article, we will be discussing React Suite Button group. The ButtonGroup component is used to group the buttons together in a group. React Suite Button Group Components: Button:
3 min read