Toolbar

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 icon="pi pi-plus" class="mr-2"/>
        <p-button icon="pi pi-print" class="mr-2"/>
        <p-button icon="pi pi-upload" />
    </div>
    <div class="p-toolbar-group-center">
        <span class="p-input-icon-left">
            <i class="pi pi-search"></i>
            <input pInputText placeholder="Search" />
        </span>
    </div>
    <div class="p-toolbar-group-end">
        <p-splitButton label="Save" icon="pi pi-check" [model]="items" />
    </div>
</p-toolbar>

Content can also be placed using the start, center and end templates.


<p-toolbar 
    styleClass="bg-gray-900 shadow-2" 
    [style]="{ 'border-radius': '3rem', 'background-image': 'linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))' }">
        <ng-template pTemplate="start">
            <img src="https://primefaces.org/cdn/primeng/images/primeng.svg" />
        </ng-template>
        <ng-template pTemplate="center">
            <div class="flex flex-wrap align-items-center gap-3">
                <button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
                    <i class="pi pi-home text-2xl"></i>
                </button>
                <button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
                    <i class="pi pi-user text-2xl"></i>
                </button>
                <button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
                    <i class="pi pi-search text-2xl"></i>
                </button>
            </div>
        </ng-template>
        <ng-template pTemplate="end">
            <div class="flex align-items-center gap-2">
                <p-avatar 
                    image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" 
                    shape="circle" />
                <span class="font-bold text-bluegray-50">
                    Amy Elsner
                </span>
            </div>
        </ng-template>
</p-toolbar>

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

NameElement
p-toolbarMain container element.
p-toolbar-group-startStart content container.
p-toolbar-group-centerCenter content container.
p-toolbar-group-endEnd content container.

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.