React Suite Button Icon Examples
Below are the implementation examples of React Suite Button Icon.
Example 1: React Suite Button Icon Components
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
// Filename - App.js 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" }}>w3wiki</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; |
Output: Now open your browser and go to http://localhost:3000/, you will see the following output
Example 2: React Suite Button Icon Custom Style
In this example, we used to size and circle properties of the IconButton component to make f
Javascript
// Filename - App.js 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" }}>w3wiki</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
React Suite Button Icon
React Suite Button Icon allows to use of an Icon as a Button. The Button component is used to fire an action when the user clicks the button.