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>neveropen</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>neveropen</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
