React Suite <IconButton> 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. <IconButton> component is used when we want to use an icon as a button. It has an icon property that is used to specify the icon of the Button.

IconButton Props:

• classPrefix: The prefix of the component CSS class.
• icon: It is used to define the icon of the button.
• placement: It is used to set the position of the Icon (left or right).
• circle: It is used to make a circular button.
• appearance: It can be used to set the appearance of the icon like primary.
• color: It is used to change the color of the Icon.
• size: It is used to mention the size of iconButton. It can be lg for large, md for medium, sm for small, and xs for extra small.

Syntax:

<IconButton icon={<PlayOutlineIcon />} 
    placement="right" appearance="primary" color="cyan">
    Play
</IconButton>

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: In this example, we will learn about the 4 props, icon, appearance, color, and placement.

Javascript

import PauseOutlineIcon from '@rsuite/icons/PauseOutline';
import React from "react";
import PlayOutlineIcon from '@rsuite/icons/PlayOutline';
import "rsuite/dist/rsuite.min.css";

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 Prop IconButton
            </h3>

            <ButtonToolbar>
                <IconButton icon={<PauseOutlineIcon />}
                     placement="left">
                    Pause
                </IconButton>

                <IconButton icon={<PlayOutlineIcon />}
                    placement="right" appearance="primary"
                    color="cyan">
                    Play
                </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 about making a circular buttons and adding colors to them.

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 Prop IconButton
            </h3>

            <ButtonToolbar>
                <IconButton icon={<SendIcon />}
                    circle color="red" appearance="primary">
                </IconButton>
                <IconButton icon={<OffRoundIcon />}
                    circle appearance="primary" color="cyan">
                </IconButton>
                <IconButton icon={<TrashIcon />}
                    circle appearance="primary" color="blue">
                </IconButton>
                <IconButton icon={<FileUploadIcon />}
                    circle color="yellow" appearance="primary">
                </IconButton>
            </ButtonToolbar>
        </div>
    );
}

export default App;

Output:

Reference:  https://rsuitejs.com/components/button/#code-lt-icon-button-gt-code