Toolbar

Toolbar is a grouping component for buttons and other content.


import { ToolbarModule } from 'primeng/toolbar';

Toolbar provides start, center and end templates to place content at these 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>

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 guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.