Source: https://primeng.org/toolbar

• FEATURES

• API

• THEMING

• PASSTHROUGH

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> <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 class="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>

Custom #

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

FilesEditView

Share

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

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.

• Import

• Basic

• Custom

• Accessibility

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

PrimeTek