Toolbar

Toolbar is a grouping component for buttons and other content.

Import via Module


import { Toolbar } from 'primereact/toolbar';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/toolbar/toolbar.min.js"></script>

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="mr-2" />
        <Button label="Upload" icon="pi pi-upload" className="p-button-success" />
        <i className="pi pi-bars p-toolbar-separator 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="mr-2" />
        <Button icon="pi pi-calendar" className="p-button-success mr-2" />
        <Button icon="pi pi-times" className="p-button-danger" />
    </React.Fragment>
);

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

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
style	string	null	Inline style of the component.
className	string	null	Style class of the component.
left	any	null	The template of left element.
right	any	null	The template of right element