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. In this article, we will be discussing the React Suite Button Icon. To use an icon as a button the IconButton component is used which has a property named icon to specify the icon we want to use.
React Suite Button Icon Components:
- IconButton: This 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.
React Suite Button Icon Props:
- icon: This property of the IconButton component is used to specify the icon we want to use.
- color: This property of the IconButton component is used to change the color of the button. The color property can have any one of seven values: red, orange, yellow, green, cyan, blue, or violet.
Syntax:
<IconButton icon={<TwitterIcon />}> Twitter </IconButton>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: Move to the newly created project folder using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required modules ( rsuite and @rsuite/icons in this case ) using the following command:
npm install rsuite @rsuite/icons
Project Structure: After completing the above steps, the project structure will look like the following:
Project Structure
Example 1: Now write down the following code in the App.js file. Here, App is our default component. In the following example, we used the IconButton component’s icon property to specify the Icon.
Javascript
import React from "react"; import { IconButton } from "rsuite"; import { Admin, Menu, Reload, Resize, Search } from '@rsuite/icons'; // Import the default CSS import "rsuite/dist/rsuite.min.css"; function App() { const ButtonStyle = { margin: "0px 10px" }; return ( <div className="App" style={{ textAlign: "center" }}> <header style={{ display: "block", marginBottom: "20px" }}> <h3 style={{ color: "green" }}>neveropen</h3> <h5>React Suite Button Icon</h5> </header> {/* Icon Buttons */} <IconButton icon={<Reload />} color="cyan" appearance="primary" style={ButtonStyle} /> <IconButton icon={<Menu />} color="red" appearance="primary" style={ButtonStyle} /> <IconButton icon={<Admin />} color="violet" appearance="primary" style={ButtonStyle} /> <IconButton icon={<Resize />} color="green" appearance="primary" style={ButtonStyle} /> <IconButton icon={<Search />} color="cyan" appearance="primary" style={ButtonStyle} /> </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 used to size and circle properties of the IconButton component to make it circular and to change the size of the icon.
Javascript
import React from "react"; import { IconButton } from "rsuite"; import { Admin, Menu, Reload, Resize, Search } from '@rsuite/icons'; // Import the default CSS import "rsuite/dist/rsuite.min.css"; function App() { const ButtonStyle = { margin: "0px 10px" }; return ( <div className="App" style={{ textAlign: "center" }}> <header style={{ display: "block", marginBottom: "20px" }}> <h3 style={{ color: "green" }}>neveropen</h3> <h5>React Suite Button Icon</h5> </header> {/* Icon Buttons */} <IconButton icon={<Menu />} color="red" appearance="primary" style={ButtonStyle} circle size="xs" /> <IconButton icon={<Admin />} color="violet" appearance="primary" style={ButtonStyle} circle size="sm" /> <IconButton icon={<Resize />} color="green" appearance="primary" style={ButtonStyle} circle size="md" /> <IconButton icon={<Search />} color="cyan" appearance="primary" style={ButtonStyle} circle size="lg" /> </div> ); } export default App; |
Output:
Reference: https://rsuitejs.com/components/button/#icon-button
