Toolbar

    Toolbar is a grouping component for buttons and other content.

    
    import { Toolbar } 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>
        <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>
    
    

    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>
    
    

    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.