Toolbar is a grouping component for buttons and other content.
import { ToolbarModule } from 'primeng/toolbar';
Toolbar is a grouping component for buttons and other content. Its content can be placed inside the start, center and end sections.
<p-toolbar>
<div class="p-toolbar-group-start">
<p-button label="New" icon="pi pi-plus" class="mr-2"></p-button>
<p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"></p-button>
<i class="p-toolbar-separator pi pi-bars mr-2" style="vertical-align: middle"></i>
<p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"></p-splitButton>
</div>
<div class="p-toolbar-group-end">
<p-button icon="pi pi-search" class="mr-2"></p-button>
<p-button icon="pi pi-calendar" styleClass="p-button-success mr-2"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
</div>
</p-toolbar>
Content can also be placed using the start, center and end templates.
<p-toolbar>
<ng-template pTemplate="start">
<p-button label="New" icon="pi pi-plus" class="mr-2"></p-button>
<p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"></p-button>
<i class="p-toolbar-separator pi pi-bars mr-2" style="vertical-align: middle"></i>
<p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"></p-splitButton>
</ng-template>
<ng-template pTemplate="center">
<span class="text-primary font-semibold text-xl">Center</span>
</ng-template>
<ng-template pTemplate="end">
<p-button icon="pi pi-search" class="mr-2"></p-button>
<p-button icon="pi pi-calendar" styleClass="p-button-success mr-2"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
</ng-template>
</p-toolbar>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-toolbar | Main container element. |
| p-toolbar-group-start | Start content container. |
| p-toolbar-group-center | Center content container. |
| p-toolbar-group-end | End content container. |
Toolbar uses toolbar role for the root element, aria-orientation is not included as it defaults to horizontal. Any valid attribute is passed to the root element so you may add additional properties like aria-labelledby and aria-labelled to define the element if required.
<p-toolbar aria-label="Actions">
Content
</p-toolbar>
Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.