adrema/resources/js/components/page/ToolbarButton.vue

<template>
    <button v-if="$attrs.onClick" v-tooltip="menuStore.tooltipsVisible ? slotContent : ''" class="btn label" v-bind="$attrs" :class="colors[color]">
        <ui-sprite v-show="icon" class="w-3 h-3 xl:mr-2" :src="icon"></ui-sprite>
        <span class="hidden xl:inline">
            <slot></slot>
        </span>
    </button>
    <i-link v-if="!$attrs.onClick && !asA" v-tooltip="menuStore.tooltipsVisible ? slotContent : ''" :href="href" class="btn label" v-bind="$attrs" :class="colors[color]">
        <ui-sprite v-show="icon" class="w-3 h-3 xl:mr-2" :src="icon"></ui-sprite>
        <span class="hidden xl:inline">
            <slot></slot>
        </span>
    </i-link>
    <a v-if="asA" v-tooltip="menuStore.tooltipsVisible ? slotContent : ''" :href="href" target="_BLANK" class="btn label" v-bind="$attrs" :class="colors[color]">
        <ui-sprite v-show="icon" class="w-3 h-3 xl:mr-2" :src="icon"></ui-sprite>
        <span class="hidden xl:inline">
            <slot></slot>
        </span>
    </a>
</template>

<script>
import {menuStore} from '../../stores/menuStore.js';

export default {
    props: {
        asA: {
            type: Boolean,
            default: () => false,
        },
        href: {
            required: false,
            default: () => '#',
        },
        icon: {},
        color: {},
    },
    data: function () {
        return {
            menuStore: menuStore(),
            colors: {
                primary: 'btn-primary',
                warning: 'btn-warning',
                info: 'btn-info',
            },
        };
    },

    computed: {
        slotContent() {
            return this.$slots.default()[0].children;
        },
    },
};
</script>