<template>
  <span class="classes" :style="styles"></span>
</template>

<script>
  const prefixCls = 'kant-badge';
  
  export default {
    name: 'kt-badge',
    props: {
      color: String,
      type: {
        type: String,
        default: 'primary'
      },
      size: {
        type: String,
        default: 'normal'
      }
    },
    computed: {
      classes() {
        return [
          `${prefixCls}`,
          `is-${this.type}`,
          `is-size-${this.size}`
        ];
      },
      styles() {
        return {
          backgroundColor: this.color
        }
      }
    }
  }
</script>
