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

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="fa-plus"></button>
        <button pButton type="button" label="Open" icon="fa-folder-open"></button>
            
        <i class="fa fa-bars"></i>
        
        <p-splitButton label="Save" icon="fa-check" [model]="items"></p-splitButton>
    </div>
    
    <div class="ui-toolbar-group-right">
        <button pButton type="button" icon="fa-search"></button>
        <i class="fa fa-bars"></i>
        <button pButton type="button" icon="fa-refresh"></button>
        <button pButton type="button" icon="fa-trash"></button>
    </div>
</p-toolbar>

Properties

Name	Type	Default	Description
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.

Styling

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

Name	Element
ui-toolbar	Main container element.
ui-toolbar-group-left	Left content container.
ui-toolbar-group-right	Right content container.

Dependencies

None.

View on GitHub


<p-toolbar>
    <div class="ui-toolbar-group-left">
        <button pButton type="button" label="New" icon="fa-plus"></button>
        <button pButton type="button" label="Open" icon="fa-folder-open" class="ui-button-success"></button>
            
        <i class="fa fa-bars"></i>
        
        <p-splitButton label="Save" icon="fa-check" (onClick)="save()" [model]="items" styleClass="ui-button-warning"></p-splitButton>
    </div>
    
    <div class="ui-toolbar-group-right">
        <button pButton type="button" icon="fa-search"></button>
        <i class="fa fa-bars"></i>
        <button pButton type="button" icon="fa-refresh"></button>
        <button pButton type="button" icon="fa-trash" class="ui-button-danger"></button>
    </div>
</p-toolbar>