React Suite Button Icon

Last Updated : 06 Mar, 2024

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.

React Suite Button Icon

Button Icon 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. It is a part of Button Component from the React Suite.

React Suite Button Icon Syntax:

<IconButton icon={<TwitterIcon />}> Twitter </IconButton>

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.

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" }}>GeeksforGeeks</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

React Suite Button Icon Example - 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" }}>GeeksforGeeks</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;