React Suite <Button> Props

Last Updated : 29 Jun, 2022

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 Prop Button. <Button> component is used to add a button in a react application.

<Button> Props:

active: It changes the button state to active.
appearance: It denotes the appearance of the button.
as: It is used to add a custom element to a button.
block: It is used to span the full width of the Button parent.
children: It denotes the primary content.
classPrefix: It denotes the prefix of the component CSS class.
color: It denotes the color of the button.
disabled: It changes the button state to disable.
href: It is used for providing a href attribute.
loading: It shows a loading indicator.
size: It denotes the size of the button.

Syntax:

<Button appearance="subtle" size="lg" colored="red" disabled>
   Default
</Button>

Creating React Application And Installing Module:

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

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the appearance, size, active <Button> props.

JavaScript

import "rsuite/dist/rsuite.min.css";
import { Button } from "rsuite";

export default function App() {

  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Button Prop</h4>

        <div style={{ marginTop: 20, width: 340 }}>
          <Button
            appearance="primary"
            size="lg"
            active  
          >Click</Button>
        </div>
          
      </div>
    </center>
  );
}

Output:

Example 2: Below example demonstrates the disabled, loading <Button> props.

JavaScript

import "rsuite/dist/rsuite.min.css";
import { Button } from "rsuite";

export default function App() {

  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Button Prop</h4>

        <div style={{ marginTop: 20, width: 340 }}>
          <span style={{fontSize: 20, marginRight: 10}}>
              Saving</span>
          <Button
            appearance="primary"
            size="md"
            disabled  
            loading
          >Loading</Button>
        </div>
          
      </div>
    </center>
  );
}