Component Structure for Buttons

Colored.vue

<template>
    <button class="btn" :classList="classList">
        <template v-if="this.icons">
            <slot></slot>
        </template>
        {{ this.text }}
    </button>
</template>

<script>
    import mixin from './mixin'

    export default {
        mixins: {
            mixin
        }
    }
</script>

index.js

import Vue from 'vue'

export const OutlineButton = Vue.component('outlined-button', require('./Outline'))
export const ColorButton = Vue.component('colored-button', require('./Color'))

mixin.js

export default {
    props: {
        text: {
            required: true,
            type: String
        },
        disabled: {
            type: Boolean,
            default: false
        },
        icons: {
            type: Boolean,
            default: false
        },
        theme: {
            type: String,
            default: 'btn-theme-blue'
        },
        pill: {
            type: Boolean,
            default: true
        }
    },
  
    computed: {
        classList () {
            return `${this.disabled ? 'btn-disabled' : ''} ${this.theme ?: ''} ${this.pill ? 'btn-rounded' : ''}`
        }
    }
}

Outlined.vue

<template>
    <button class="btn btn-outlined" :classList="classList">
        <template v-if="this.icons">
            <slot></slot>
        </template>
        {{ this.text }}
    </button>
</template>

<script>
    import mixin from './mixin'

    export default {
        mixins: {
            mixin
        }
    }
</script>

SomeFile.vue

<template>
  <div>
    <outlined-button text="oulined button" :icons="true">
        <i class="fa fa-cog"></i>
    </outlined-button>
    <colored-button text="colored button"></colored-button>
  </div>
</template>

<script>
  import { OutlineButton, ColorButton } from './components/Button'
  
  export default {
      data () {}
  }
</script>