React Suite Button Custom Combination
Last Updated :
05 Jul, 2022
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 Custom Combination Button. In react suite, we can create a custom button using different combinations including icons, text, colors, etc.
Syntax:
<ButtonToolbar>
<Button color="red" appearance="primary">
<Icon />
...
</Button>
</ButtonToolbar>
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 basic custom combination of buttons.
Javascript
import "rsuite/dist/rsuite.min.css" ;
import { ButtonToolbar, Button } from "rsuite" ;
import Send from "@rsuite/icons/legacy/Send" ;
import Share from "@rsuite/icons/legacy/Share" ;
export default function App() {
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite Custom Combination Button
</h4>
<div style={{ marginTop: 20, width: 400 }}>
<ButtonToolbar>
<Button color= "green" appearance= "primary" >
<Send /> Send
</Button>
<Button color= "blue" appearance= "primary" >
<Share /> Share
</Button>
</ButtonToolbar>
</div>
</div>
</center>
);
}
|
Output:
Example 2: Below example demonstrates the custom loading and disabled combination of buttons.
Javascript
import "rsuite/dist/rsuite.min.css" ;
import { ButtonToolbar, Button } from "rsuite" ;
import Download from "@rsuite/icons/legacy/Download" ;
export default function App() {
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite Custom Combination Button
</h4>
<div style={{ marginTop: 20, width: 400 }}>
<ButtonToolbar>
<Button color= "violet" appearance= "primary" loading>
Button
</Button>
<Button color= "red" appearance= "primary" disabled>
<Download /> Download
</Button>
</ButtonToolbar>
</div>
</div>
</center>
);
}
|
Output:
Reference: https://rsuitejs.com/components/button/#custom-combination-button
Share your thoughts in the comments
Please Login to comment...