57 lines
770 B
Vue
57 lines
770 B
Vue
<template>
|
|
<span :class="['badge', `badge-${variant}`]">
|
|
<slot>{{ text }}</slot>
|
|
</span>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
text: String,
|
|
variant: {
|
|
type: String,
|
|
default: 'default'
|
|
// default, critical, error, warn, success, info
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.badge-default {
|
|
background: #e9ecef;
|
|
color: #495057;
|
|
}
|
|
|
|
.badge-critical {
|
|
background: #e74c3c;
|
|
color: white;
|
|
}
|
|
|
|
.badge-error {
|
|
background: #e74c3c;
|
|
color: white;
|
|
}
|
|
|
|
.badge-warn {
|
|
background: #f39c12;
|
|
color: white;
|
|
}
|
|
|
|
.badge-success {
|
|
background: #27ae60;
|
|
color: white;
|
|
}
|
|
|
|
.badge-info {
|
|
background: #3498db;
|
|
color: white;
|
|
}
|
|
</style>
|