React Suite Button toolbar

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite Button toolbar. A button toolbar consists of a combination of button groups to create a button toolbar for more complex components.

Button Props:

• active: It changes the button state to active.
• appearance: It denotes the appearance of the button.
• as: It is used to add a custom element to a button.
• block: It is used to span the full width of the Button parent.
• children: It denotes the primary content.
• classPrefix: It denotes the prefix of the component CSS class.
• color: It denotes the color of the button.
• disabled: It changes the button state to disable.
• href: It is used for providing a href attribute.
• loading: It shows a loading indicator.
• size: It denotes the size of the button.

IconButton Props:

• circle– It is used to set the circle button.
• classPrefix– It denotes the prefix of the component CSS class.
• icon– It is used to set the icon of the button.
• placement– It sets the placement of the icon.

ButtonGroup Props:

• block– It displays the block button groups.
• classPrefix– It denotes the prefix of the component CSS class.
• justified– It sets the horizontal constant width layout.
• size– It sets the button size.
• vertical– It sets the vertical layouts of buttons.

Syntax:

 <ButtonToolbar>
    <IconButton />
        ...
    <ButtonGroup>
           ...
    </ButtonGroup>
</ButtonToolbar>

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrates the basic button toolbar.

Javascript

import "rsuite/dist/rsuite.min.css";
import { Button, ButtonToolbar, ButtonGroup } from "rsuite";

export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Button Toolbar</h4>

                <div style={{ marginTop: 20, width: 400 }}>
                    <ButtonToolbar>
                        <Button>Prev</Button>
                        <ButtonGroup>
                            <Button style={{ marginRight: 10 }}>
                                1</Button>
                            <Button style={{ marginRight: 10 }}>
                                2</Button>
                            <Button style={{ marginRight: 10 }}>
                                3</Button>
                            <Button style={{ marginRight: 10 }}>
                                4</Button>
                            <Button style={{ marginRight: 10 }}>
                                5</Button>
                            <Button>6</Button>
                        </ButtonGroup>
                        <Button>Next</Button>
                    </ButtonToolbar>
                </div>
            </div>
        </center>
    );
}

Output:

Example 2: Below example demonstrates the colored button toolbar with icons.

Javascript

import "rsuite/dist/rsuite.min.css";
import { ButtonToolbar, ButtonGroup, IconButton } from "rsuite";
import AlignLeft from "@rsuite/icons/legacy/AlignLeft";
import AlignCenter from "@rsuite/icons/legacy/AlignCenter";
import AlignRight from "@rsuite/icons/legacy/AlignRight";
import AlignJustify from "@rsuite/icons/legacy/AlignJustify";

export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Button Toolbar</h4>

                <div style={{ marginTop: 20, width: 400 }}>
                    <h5>Alignment</h5>
                    <ButtonToolbar>
                        <ButtonGroup>
                            <IconButton style={{ marginRight: 10 }}
                                color="red" appearance="primary"
                                icon={<AlignLeft />} />
                            <IconButton style={{ marginRight: 10 }}
                                color="green" appearance="primary"
                                icon={<AlignCenter />} />
                            <IconButton style={{ marginRight: 10 }}
                                color="yellow" appearance="primary"
                                icon={<AlignRight />} />
                            <IconButton color="blue" appearance="primary"
                                icon={<AlignJustify />} />
                        </ButtonGroup>
                    </ButtonToolbar>
                </div>
            </div>
        </center>
    );
}

Output:

Reference: https://rsuitejs.com/components/button/#button-toolbar