Toolbar

Toolbar is a grouping component for buttons and other content.

Download #


npx volt-vue add Toolbar

Import #


import Toolbar from '@/volt/Toolbar.vue';

Basic #

Toolbar provides start, center and end properties to place content at these sections.


<template>
    <Toolbar>
        <template #start>
            <SecondaryButton icon="pi pi-plus" class="mr-2" text />
            <SecondaryButton icon="pi pi-print" class="mr-2" text />
            <SecondaryButton icon="pi pi-upload" severity="secondary" text />
        </template>

        <template #center>
            <InputText placeholder="Search" />
        </template>

        <template #end>
            <Button icon="pi pi-check" />
        </template>
    </Toolbar>
</template>

<script setup lang="ts">
import Button from '@/volt/Button.vue';
import SecondaryButton from '@/volt/SecondaryButton.vue';
import InputText from '@/volt/InputText.vue';
import Toolbar from '@/volt/Toolbar.vue';
</script>

Custom #

A customized toolbar with navigation bar functionality.


<template>
    <Toolbar pt:root="rounded-full p-4">
        <template #start>
            <div class="flex items-center gap-2">
                <svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-8 ms-4">
                    ...
                </svg>
                <SecondaryButton label="Files" text />
                <SecondaryButton label="Edit" text />
                <SecondaryButton label="View" text />
            </div>
        </template>

        <template #end>
            <div class="flex items-center gap-2">
                <ContrastButton label="Share" size="small" />
                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
            </div>
        </template>
    </Toolbar>
</template>

<script setup lang="ts">
import Avatar from '@/volt/Avatar.vue';
import ContrastButton from '@/volt/ContrastButton.vue';
import SecondaryButton from '@/volt/SecondaryButton.vue';
import Toolbar from '@/volt/Toolbar.vue';
</script>