Skip to content
Related Articles
Open in App
Not now

Related Articles

React Suite <IconButton> Props

Improve Article
Save Article
  • Last Updated : 18 Jun, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!