<template>
  <span class="qf-pill" :type="type" :size="size" :class="[
     type ? 'qf-pill-' + type : '',
     fill ? 'qf-pill-fill' : '',
     size ? 'qf-pill-' + size : 'qf-pill-default'
  ]">
    <slot></slot>
  </span>
</template>

<script>
  export default {
    name: 'QfPill',
    props: {
      type: {
        type: String,
        default: 'default'
      },
      fill: {
        type: Boolean,
        default: false
      },
      size: String
    }
  };
</script>
