React Suite <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 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
Share your thoughts in the comments
Please Login to comment...