Vue AppBar buttons have background color - vue.js

Question

I have written the following code for my AppBar using Vuetify component framework:
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<nav>
<v-app-bar app>
<v-btn v-if="$vuetify.breakpoint.smAndDown" #click="openDrawer = !openDrawer" text icon>
<v-icon>mdi-view-headline</v-icon>
</v-btn>
<v-btn v-else :to="{name: 'home'}" text color="primary" class="ml-3" icon>
<!-- Logo -->
<img height="48"
:src="require('#/assets/logo.svg')"
alt="Manassa Logo"/>
</v-btn>
<div v-if="$vuetify.breakpoint.mdAndUp" class="mx-6"></div>
<v-toolbar-items v-if="$vuetify.breakpoint.mdAndUp">
<v-btn :to="{name: 'products'}" text color="primary">{{ $t('appBar.products') }}</v-btn>
<v-btn :to="{name: 'services'}" text color="primary">{{ $t('appBar.services') }}</v-btn>
<v-btn :to="{name: 'news'}" text color="primary">{{ $t('appBar.news')}}</v-btn>
<v-btn :to="{name: 'blogs'}" text color="primary">{{ $t('appBar.blogs')}}</v-btn>
<v-btn :to="{name: 'about'}" text color="primary">{{ $t('appBar.about')}}</v-btn>
<v-btn :to="{name: 'help'}" text color="primary">{{ $t('appBar.help')}}</v-btn>
<v-btn :to="{name: 'contact-us'}" text color="primary">{{ $t('appBar.contact-us')}}</v-btn>
</v-toolbar-items>
</v-app-bar>
</nav>
</template>
However, the navbar buttons always have background-color.
How can I fix this?