Open In App

React Suite Button Custom Combination

Improve
Improve
Like Article
Like
Save
Share
Report

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



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