AStatus.vue

<template>
  <span
    class="status tw-font-medium tw-tracking-wide tw-whitespace-nowrap tw-select-none tw-px-2 tw-py-1"
    :class="{
      'tw-rounded-full': round,
      'tw-rounded': rounded,
      'tw-text-emerald-600': isSuccess,
      'tw-text-amber-600': isWarning,
      'tw-text-rose-600': isError,
    }"
    ><slot
  /></span>
</template>

<script lang="ts" setup>
defineProps<{
  round?: boolean
  rounded?: boolean
  isWarning?: boolean
  isError?: boolean
  isSuccess?: boolean
}>()
</script>

<style lang="postcss" scoped>
.status {
  --bg: color-mix(in srgb-linear, currentColor 10%, transparent 90%);
  background-color: var(--bg);
}
</style>