<template>
  <div :class="[
    `${$classPrefix}-badge`,
    `${hasColor ? color : 'default'}`
  ]">
    <span>
      <slot />
    </span>
  </div>
</template>

<script>
import _color from "../../utils/color.js";

export default {
  name: "IrbisBadge",

  props: {
    color: {
      default: "default",
      type: String
    }
  },

  computed: {
    hasColor() {
      return _color.hasColor(this.color);
    }
  }
};
</script>