<template>
    <transition :name="disableTransitions ? '': 'zoom-in-center'">
    <span class="tag" :class="[type?type : '']" :style="{backgroundColor: color}">
      <slot></slot>
      <i class="tag-close icon-close" v-if="closable" @click.stop="handleClose"></i>
    </span>
    </transition>
</template>

<script>
    export default {
        name: 'Tag',
        props: {
            text: String,
            closable: Boolean,
            type: String,
            disableTransitions: Boolean,
            color: String,
            size: String
        },
        methods: {
            handleClose(event) {
                this.$emit('close', event);
            }
        },
    };
</script>

<style scoped>

</style>