<template>
  <div :class="['s-badge',type]">
      <slot></slot>
  </div>
</template>

<script lang='ts' setup>
interface Props{
    type: "success" | "danger" | "warm" | "help" | "primary"
}
const props = withDefaults(defineProps<Props>(), {
   type: "help"
})

</script>

<style scoped lang='less'>
.s-badge{
    color:white;
    padding: 4px 8px;
    border-radius: @smallRadius;
    &.success{
        background-color: @success;
    }
    &.danger{
        background-color: @danger;
    }
    &.warm{
        background-color: @warn;
    }
    &.help{
        background-color: @help;
    }
    &.primary{
        background-color: @primary;
    }
}
</style>
