[Vuejs]-Vuetify v-btn how to remove follow up slot span tag

The V-Btn component have a genContent function implementation which will be invoked to generate the child elements while rendering the root component. By default it provides the following implementation.

genContent (): VNode {
  return this.$createElement('span', {
    staticClass: 'v-btn__content',
  }, this.$slots.default)
}

As you can see it creates a span element with a static class v-btn__content .That’s why the text is rendered with in the span tag.

So to answer your question, you might have to extend the V-btn component and provide your own implementation of genContent function. The official doc provides a sample example(codepen) on how to extend the componet and override the genContent(which is copied below)

// src/components/ActivateBtn
import { VBtn } from 'vuetify/lib'

export default {
  extends: VBtn,

  methods: {
    // Here we overwrite the genContent method of VBtn
    // to override the default genContent method
    genContent() {
      return this.$createElement('div', {
        staticClass: 'v-btn__contents'
      }, [
        'Activate ',
        this.$slots.default
      ])
    }
  }
}