React Suite <IconButton> Props
Last Updated :
18 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. <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
Share your thoughts in the comments
Please Login to comment...