Open In App

React Suite <Button> Props

Improve
Improve
Like Article
Like
Save
Share
Report

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>
  );
}


Output:

 

Reference: https://rsuitejs.com/components/button/#code-lt-button-gt-code



Last Updated : 29 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads