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

Import


import {ToolbarModule} from 'primeng/primeng';

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" (onClick)="save()" [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>

Attributes

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

Native component that only requires the css of PrimeUI Toolbar.



<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" (onClick)="save()" [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>