Toolbar
Toolbar is a grouping component for buttons and other content.
Import #
import { Toolbar } from 'primeng/toolbar';
Basic #
Toolbar is a grouping component for buttons and other content. Its content can be placed inside the start, center and end sections.
<p-toolbar>
<ng-template #start>
<p-button icon="pi pi-plus" class="mr-2" text severity="secondary" />
<p-button icon="pi pi-print" class="mr-2" text severity="secondary" />
<p-button icon="pi pi-upload" text severity="secondary" />
</ng-template>
<ng-template #center>
<p-iconfield iconPosition="left">
<p-inputicon styleClass="pi pi-search" />
<input type="text" pInputText placeholder="Search" />
</p-iconfield>
</ng-template>
<ng-template #end>
<p-splitbutton label="Save" [model]="items" />
</ng-template>
</p-toolbar>
Custom #
Content can also be placed using the start, center and end templates.
<p-toolbar [style]="{ 'border-radius': '3rem', 'padding': '1rem 1rem 1rem 1.5rem' }">
<ng-template #start>
<div class="flex items-center gap-2">
<svg width="31" height="33" viewBox="0 0 31 33" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
<path d="..." fill="var(--p-primary-color)" />
<mask id="mask0_1_52" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
</svg>
<p-button label="Files" text plain />
<p-button label="Edit" text plain />
<p-button label="View" text plain />
</div>
</ng-template>
<ng-template #end>
<div class="flex items-center gap-2">
<p-button label="Share" severity="contrast" size="small" />
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" [style]="{ width: '32px', height: '32px' }" />
</div>
</ng-template>
</p-toolbar>
Accessibility #
Screen Reader
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>
Keyboard Support
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.