20 lines
535 B
Vue
20 lines
535 B
Vue
<script setup>
|
|
defineProps({
|
|
variant: { type: String, default: 'info' }, // success | warning | info | unknown
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
:class="[
|
|
'inline-flex items-center gap-1 text-xs font-medium px-2.5 py-0.5 rounded-full',
|
|
variant === 'success' && 'bg-green-50 text-green-600',
|
|
variant === 'warning' && 'bg-amber-50 text-amber-600',
|
|
variant === 'info' && 'bg-blue-50 text-[#1a56db]',
|
|
variant === 'unknown' && 'bg-gray-100 text-gray-500',
|
|
]"
|
|
>
|
|
<slot />
|
|
</span>
|
|
</template>
|