ReactJS Onsen UI ToolbarButton Component Last Updated : 07 Feb, 2023 Comments Improve Suggest changes Like Article Like Report ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. ToolbarButton components provide a way to add the buttons in the toolbar. It is the Button component for the Toolbar. We can use the following approach in ReactJS to use the Onsen-UI ToolbarButton Component. ToolbarButton Props: modifier: It is used for the appearance of the button.disabled: It is used to indicate whether the button is disabled or not. Preset Modifiers: material: It is used to show the material design toolbar button.outline: It is used for a button with an outline. Creating React Application And Installing Module: Step 1: Create a React application using the following command: npx create-react-app foldername Step 2: After creating your project folder i.e. foldername, move to it using the following command: cd foldername Step 3: After creating the ReactJS application, Install the required module using the following command: npm install onsenui react-onsenui Project Structure: It will look like the following. Project StructureExample: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. App.js import React from 'react'; import 'onsenui/css/onsen-css-components.css'; import { Toolbar, ToolbarButton } from 'react-onsenui'; export default function App() { return ( <div style={{ display: 'block', width: 500, paddingLeft: 30 }}> <h6>ReactJS Onsen-UI ToolbarButton Component</h6> <Toolbar> <div className="left"> <ToolbarButton>Left Button</ToolbarButton> </div> <div className="center"> <ToolbarButton>Center Button</ToolbarButton> </div> <div className="right"> <ToolbarButton>Right Button</ToolbarButton> </div> </Toolbar> </div> ); } Step to Run Application: Run the application using the following command from the root directory of the project: npm startOutput: Now open your browser and go to http://localhost:3000/, you will see the following output: Reference: https://onsen.io/v2/api/react/ToolbarButton.html Comment More infoAdvertise with us Next Article ReactJS Onsen UI ToolbarButton Component gouravhammad Follow Improve Article Tags : JavaScript Web Technologies ReactJS Onsen-UI Similar Reads ReactJS Onsen UI Toolbar Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Toolbar components allow the users to show them a toolbar that can be used with navigation. We can use the following appro 2 min read ReactJS Onsen UI Toast Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Toast Component allows the user to display dismissible information or simple actions at the bottom of the page. We can use 2 min read ReactJS Onsen UI Row Component ReactJS Onsen-UI is a popular front-end library with a set of React components designed to develop HTML5 hybrid and mobile web apps beautifully and efficiently. Row Component provides a way to represent a row in the grid system, and it is used to display data in the form of rows. We can use the foll 2 min read ReactJS Onsen UI Select Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Select Component allows the user to select an item from a list of options. We can use the following approach in ReactJS to 2 min read ReactJS Onsen UI SearchInput Component ReactJS Onsen-UI is a popular front-end library with a set of React components designed to develop HTML5 hybrid and mobile web apps beautifully and efficiently. SearchInput Component allows the user to provide a search input text field. We can use the following approach in ReactJS to use the Onsen-U 2 min read ReactJS Onsen UI Switch Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Switch components are used to toggle the state of a single setting on or off. We can use the following approach in ReactJS 2 min read ReactJS Onsen UI Ripple Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Ripple components are used to add a Material Design ripple effect to an element. We can use the following approach in Reac 2 min read ReactJS Onsen UI Segment Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Segment Component allows the user to toggle between a different number of options in a row. We can use the following appro 2 min read ReactJS Onsen UI Fab Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Fab Component allows the user to provide a Floating action button which is a circular button. We can use the following app 2 min read How to use ToggleButtonGroup Component in ReactJS ? Whenever the user wants to group a related option, the ToggleButtonGroup component is used. Material UI for ReactJS has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to use ToggleButtonGroup component.Prerequisites:NPM & Node.jsRe 3 min read Like