React Toolbar - Overview

The Toolbar is a UI component containing items that usually manage screen content. Those items can be plain text or UI components.

View Demo

The following code adds a simple Toolbar to your page. Three items are plain text and one is a Button UI component.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Toolbar, Item } from 'devextreme-react/toolbar';
  •  
  • const buttonOptions = {
  • type: 'back',
  • text: 'Back'
  • };
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Toolbar>
  • <Item
  • widget="dxButton"
  • location="before"
  • options={buttonOptions}
  • />
  • <Item
  • text="Add"
  • locateInMenu="always"
  • />
  • <Item
  • text="Change"
  • locateInMenu="always"
  • />
  • <Item
  • text="Products"
  • location="center"
  • />
  • </Toolbar>
  • );
  • }
  • }
  •  
  • export default App;

Note that field names in these data source items are conventional. This provides a default tile appearance, which can be customized later.

See Also