Toolbar

import Toolbar from 'primevue/toolbar';

<Toolbar>
    <template #start>
        <Button icon="pi pi-plus" class="mr-2" />
        <Button icon="pi pi-print" class="mr-2" />
        <Button icon="pi pi-upload" />
    </template>

    <template #center>
        <span class="relative">
            <i class="pi pi-search absolute top-2/4 -mt-2 left-3 text-surface-400 dark:text-surface-600" />
            <InputText placeholder="Search" class="pl-10" />
        </span>
    </template>

    <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
</Toolbar>

<Toolbar class="bg-surface-900 shadow-md rounded-[3rem] bg-gradient-to-r from-primary-500/70 to-primary-600/80" >
    <template #start>
        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="..." fill="#ffffff" />
            <path d="..." fill="#10b981" />
        </svg>
    </template>

    <template #center>
        <div class="flex flex-wrap items-center gap-3">
            <button class="p-link inline-flex justify-center items-center text-white h-[3rem] w-[3rem] rounded-full hover:bg-white/10 transition-all transition-duration-200"><i class="pi pi-home text-2xl"></i></button>
            <button class="p-link inline-flex justify-center items-center text-white h-[3rem] w-[3rem] rounded-full hover:bg-white/10 transition-all transition-duration-200"><i class="pi pi-user text-2xl"></i></button>
            <button class="p-link inline-flex justify-center items-center text-white h-[3rem] w-[3rem] rounded-full hover:bg-white/10 transition-all transition-duration-200"><i class="pi pi-search text-2xl"></i></button>
        </div>
    </template>

    <template #end>
        <div class="flex items-center gap-2">
            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
            <span class="font-bold text-surface-0">Amy Elsner</span>
        </div>
    </template>
</Toolbar>