Toolbar
Toolbar is a grouping component for buttons and other content.
Import #
import { ToolbarModule } 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>
<div class="p-toolbar-group-start">
<p-button icon="pi pi-plus" class="mr-2" text />
<p-button icon="pi pi-print" class="mr-2" text />
<p-button icon="pi pi-upload" text />
</div>
<div class="p-toolbar-group-center">
<p-iconfield iconPosition="left">
<p-inputicon styleClass="pi pi-search" />
<input type="text" pInputText placeholder="Search" />
</p-iconfield>
</div>
<div class="p-toolbar-group-end">
<p-splitbutton label="Save" [model]="items" />
</div>
</p-toolbar>
Template #
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 pTemplate="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">
<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"
>
<path
d="..."
fill="var(--high-contrast-text-color)"
/>
</mask>
<g mask="url(#mask0_1_52)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="..."
fill="var(--p-primary-color)"
/>
</g>
<path
d="..."
fill="var(--high-contrast-text-color)"
/>
<path
d="..."
fill="var(--high-contrast-text-color)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="..."
fill="var(--high-contrast-text-color)"
/>
<path
d="..."
fill="var(--high-contrast-text-color)"
/>
<path
d="..."
fill="var(--high-contrast-text-color)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="..."
fill="var(--high-contrast-text-color)"
/>
<path
d="..."
fill="var(--high-contrast-text-color)"
/>
<path
d="..."
fill="var(--high-contrast-text-color)"
/>
<path
d="..."
fill="var(--high-contrast-text-color)"
/>
<path
d="..."
fill="var(--high-contrast-text-color)"
/>
</svg>
<p-button label="Files" text plain />
<p-button label="Edit" text plain />
<p-button label="View" text plain />
</div>
</ng-template>
<ng-template pTemplate="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.