import Toolbar from 'primevue/toolbar';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/toolbar/toolbar.min.js"></script>
Toolbar provides start, center and end templates to place content at these sections.
<Toolbar>
<template #start>
<Button label="New" icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
<i class="pi pi-bars p-toolbar-separator mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template>
<template #end>
<Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-calendar" class="p-button-success mr-2" />
<Button icon="pi pi-times" class="p-button-danger" />
</template>
</Toolbar>
| Name | Parameters |
|---|---|
| start | - |
| end | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-toolbar | Main container element. |
| p-toolbar-group-start | Start content container. |
| p-toolbar-group-center | Center content container. |
| p-toolbar-group-end | End content container. |
Toolbar uses toolbar role to 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 to define the element if required.
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.
None.