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"/>
        <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>

Template #

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>

Style #

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.

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.

PrimeNG 17.18.12 by PrimeTek