Vue3 Toolbar is a grouping component for buttons and other content. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import Toolbar from 'primevue/toolbar';
Getting Started
Toolbar provides left and right templates to place content at these sections.
<Toolbar>
<template #left>
<Button label="New" icon="pi pi-plus" class="p-mr-2" />
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
<i class="pi pi-bars p-toolbar-separator p-mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template>
<template #right>
<Button icon="pi pi-search" class="p-mr-2" />
<Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
<Button icon="pi pi-times" class="p-button-danger" />
</template>
</Toolbar>
Theming
Toolbar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue Toolbar showcase for demos and documentation.