React Suite Button ts:Color Props

Last Updated : 28 Jun, 2022

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Button component is used to fire an action when the user clicks the button.

Syntax:

<Button  appearance="primary" color="violet">
    Violet
</Button>

Creating React Application And Installing Module:

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

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install rsuite

Project Structure: It will look like the following:

Example 1: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. In this article, we will learn about 4 colors i.e. blue, yellow, cyan, and red. We will use these colors with IconButtons.

Javascript

import React from "react"; 
import FileUploadIcon from '@rsuite/icons/FileUpload'; 
import OffRoundIcon from '@rsuite/icons/OffRound'; 
import SendIcon from '@rsuite/icons/Send'; 
import "rsuite/dist/rsuite.min.css"; 
import TrashIcon from '@rsuite/icons/Trash'; 
import IconButton from 'rsuite/IconButton'; 
import ButtonToolbar from 'rsuite/ButtonToolbar'; 
function App() { 
  
    return ( 
        <div style={{ padding: 10 }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3 > 
                React Suite Button Prop ts:Color</h3> 
            <ButtonToolbar> 
                <IconButton icon={<SendIcon />}  
                    color="red" appearance="primary"> 
                    Red 
                </IconButton> 
                <IconButton icon={<OffRoundIcon />}  
                    appearance="primary" color="cyan"> 
                    Cyan 
                </IconButton> 
                <IconButton icon={<TrashIcon />}  
                    appearance="primary" color="blue"> 
                    Blue 
                </IconButton> 
                <IconButton icon={<FileUploadIcon />}  
                    color="yellow" appearance="primary"> 
                    Yellow 
                </IconButton> 
            </ButtonToolbar> 
        </div> 
    ); 
} 
  
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we will learn to use color props with simple buttons.

Javascript

import React from "react"; 
import Button from 'rsuite/Button'; 
import "rsuite/dist/rsuite.min.css"; 
  
import ButtonToolbar from 'rsuite/ButtonToolbar'; 
function App() { 
  
    return ( 
        <div style={{ padding: 10 }}> 
            <h1 style={{ color: 'green' }}> 
                GeeksforGeeks 
            </h1> 
              
            <h3 > 
                React Suite Button Prop ts:Color 
            </h3> 
              
            <ButtonToolbar> 
                <Button color="orange" appearance="primary"> 
                    Orange 
                </Button> 
                <Button appearance="primary" color="cyan"> 
                    Cyan 
                </Button> 
                <Button appearance="primary" color="violet"> 
                    Violet 
                </Button> 
                <Button color="green" appearance="primary"> 
                    Green 
                </Button> 
            </ButtonToolbar> 
        </div> 
    ); 
} 
  
export default App;