ToolbarToolbar is a grouping component for buttons and other content.

Documentation

Import

import {ToolbarModule} from 'primeng/toolbar';
 

Getting Started

Toolbar is a container component defined using p-toolbar element. Left aligned content is placed inside a div having .ui-toolbar-group-left class and similarly .ui-toolbar-group-right for right alignment.

<p-toolbar>
    <div class="ui-toolbar-group-left">
        <button pButton type="button" label="New" icon="pi pi-plus"></button>
        <button pButton type="button" label="Upload" icon="pi pi-upload" class="ui-button-success"></button>
        <i class="pi pi-bars"></i>
        <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="ui-button-warning"></p-splitButton>
    </div>
    <div class="ui-toolbar-group-right">
        <button pButton type="button" icon="pi pi-search"></button>
        <button pButton type="button" icon="pi pi-calendar" class="ui-button-success"></button>
        <button pButton type="button" icon="pi pi-times" class="ui-button-danger"></button>
    </div>
</p-toolbar>
 

Properties

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Dependencies

None.

Source

View on GitHub

<p-toolbar>
    <div class="ui-toolbar-group-left">
        <button pButton type="button" label="New" icon="pi pi-plus"></button>
        <button pButton type="button" label="Upload" icon="pi pi-upload" class="ui-button-success"></button>
        <i class="ui-toolbar-separator pi pi-bars" style="vertical-align: middle"></i>
        <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="ui-button-warning"></p-splitButton>
    </div>
    <div class="ui-toolbar-group-right">
        <button pButton type="button" icon="pi pi-search"></button>
        <button pButton type="button" icon="pi pi-calendar" class="ui-button-success"></button>
        <button pButton type="button" icon="pi pi-times" class="ui-button-danger"></button>
    </div>
</p-toolbar>