6 lines
1.1 KiB
Vue
6 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{label:string;tone?:'neutral'|'info'|'success'|'warning'|'danger'}>(),{tone:'neutral'})
|
|
</script>
|
|
<template><span class="kbx-badge" :data-tone="tone">{{label}}</span></template>
|
|
<style scoped>.kbx-badge{display:inline-flex;align-items:center;min-height:calc(var(--kbx-space-5) + var(--kbx-space-1));padding:0 var(--kbx-space-2);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-pill);background:var(--kbx-color-surface-muted);font-size:var(--kbx-font-xs);white-space:nowrap}.kbx-badge[data-tone="info"]{color:var(--kbx-color-primary);border-color:var(--kbx-color-info-border);background:var(--kbx-color-info-surface)}.kbx-badge[data-tone="success"]{color:var(--kbx-color-success);border-color:var(--kbx-color-success-border);background:var(--kbx-color-success-surface)}.kbx-badge[data-tone="warning"]{color:var(--kbx-color-warning-text);border-color:var(--kbx-color-warning-border);background:var(--kbx-color-warning-surface)}.kbx-badge[data-tone="danger"]{color:var(--kbx-color-danger);border-color:var(--kbx-color-danger-border);background:var(--kbx-color-danger-surface)}</style>
|