React Suite Button ts:Color Props

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.

ts:Color props are used to provide different colors to the Buttons. It provides different color options: ‘red’ | ‘orange’ | ‘yellow’ | ‘green’ | ‘cyan’ | ‘blue’ | ‘violet’.

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;

Output:

Reference: https://rsuitejs.com/components/button/#code-ts-color-code