Vuetify, how to style/theme a button to always be "small" and "tile"?

Question

How can I change the default appearance of a button, so every time I create a button it will look the same? I understand how to i.e. use the color theme to change the i.e. "primary" color, and how to change the css for i.e. all button background colors.

But how would I go about if I for example want:

All buttons to automatically appear as "small" and "tile" by default?

Answer 1

Create your own component, e.g. like this one at src/components/XBtn.vue:

<template>
  <v-btn
    v-bind="$props"
    small
    tile
    v-on="$listeners"
  >
    <slot></slot>
  </v-btn>
</template>

<script>
  import VBtn from 'vuetify/lib/components/VBtn/'
  export default {
    name: 'XBtn',
    props: VBtn.options.props,
  }
</script>

Then elsewhere in your app, you can import it:

<template>
  <v-row>
    <x-btn color="primary">Save</x-btn>
  </v-row>
</template>

<script>
  import XBtn from '@/components/XBtn'
  export default {
    name: 'SomeOtherComponent',
    components: {
      XBtn,
    },
  }
</script>

Or if you want it to be globally available without having to import it each time, you can register it in src/main.js like this:

// ... other imports ...
import XBtn from '@/components/XBtn'

Vue.component('x-btn', XBtn)

new Vue({
  // ... main Vue instance config ...
})

The cool thing about doing it this way is that the XBtn component you derive from VBtn will have ALL of the same properties and events. XBtn will default to small and tile but you can still override these by doing something like: <x-btn large>. You basically use it the exact same way that you use VBtn.