React Toolbar

React Toolbar is a grouping component for buttons and other content.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { Toolbar } from 'primereact/toolbar';

Getting Started

Toolbar provides left and right templates to place content at these sections.

const leftContents = (
    <React.Fragment>
        <Button label="New" icon="pi pi-plus" className="p-mr-2" />
        <Button label="Upload" icon="pi pi-upload" className="p-button-success" />
        <i className="pi pi-bars p-toolbar-separator p-mr-2" />
        <SplitButton label="Save" icon="pi pi-check" model={items} className="p-button-warning"></SplitButton>
    </React.Fragment>
);

const rightContents = (
    <React.Fragment>
        <Button icon="pi pi-search" className="p-mr-2" />
        <Button icon="pi pi-calendar" className="p-button-success p-mr-2" />
        <Button icon="pi pi-times" className="p-button-danger" />
    </React.Fragment>
);

<Toolbar left={leftContents} right={rightContents} />

Theming

Toolbar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Toolbar showcase for demos and documentation.