Skip to content
Related Articles

Related Articles

React Suite Button toolbar

View Discussion
Improve Article
Save Article
  • Last Updated : 03 Jul, 2022

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!