cfc/cfc-frontend/components/BaseBadge.vue

<template>
  <view
    class="base-badge"
    :class="['base-badge--' + variant, 'base-badge--' + size]"
  >
    <slot />
  </view>
</template>

<script>
export default {
  name: 'BaseBadge',
  props: {
    variant: { type: String, default: 'primary' },
    // 'primary' | 'success' | 'warning' | 'error' | 'accent' | 'muted'
    size: { type: String, default: 'sm' }
    // 'xs' | 'sm' | 'md'
  }
}
</script>

<style scoped>
.base-badge {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  border-radius: 999rpx;
  white-space: nowrap;
}

/* Sizes */
.base-badge--xs { font-size: 20rpx; padding: 4rpx 14rpx; line-height: 1.4; }
.base-badge--sm { font-size: 22rpx; padding: 6rpx 18rpx; line-height: 1.4; }
.base-badge--md { font-size: 24rpx; padding: 8rpx 24rpx; line-height: 1.5; }

/* Variants */
.base-badge--primary {
  background: rgba(249, 115, 22, 0.12);
  color: var(--color-primary, #F97316);
}
.base-badge--success {
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success, #22C55E);
}
.base-badge--warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning, #F59E0B);
}
.base-badge--error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-error, #EF4444);
}
.base-badge--accent {
  background: rgba(14, 165, 233, 0.12);
  color: var(--color-accent, #0EA5E9);
}
.base-badge--muted {
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted, #94A3B8);
}
</style>