common Badge.vue

0% Statements 0/1

0% Branches 0/2

100% Functions 0/0

0% Lines 0/1

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  <script setup lang="ts">
defineProps<{
  tone?: 'brand' | 'success' | 'warning' | 'danger' | 'neutral'
}>()
</script>
 
<template>
  <span
    class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
    :class="{
      'bg-brand-50 text-brand-700': tone === 'brand' || !tone,
      'bg-emerald-50 text-emerald-700': tone === 'success',
      'bg-amber-50 text-amber-700': tone === 'warning',
      'bg-red-50 text-red-700': tone === 'danger',
      'bg-slate-100 text-slate-600': tone === 'neutral'
    }"
  >
    <slot />
  </span>
</template>