Files
ComfyUI_frontend/src/components/common/StatusBadge.vue
Alexander Brown 73cfbd9833 feat(StatusBadge): add dot mode with CVA variants (#8202)
## Summary

Refactors StatusBadge to use CVA (class-variance-authority) for variant
management and adds a new `dot` mode for label-free status indicators.

## Changes

- **CVA variants** (`statusBadge.variants.ts`): Extracts styling logic
into a CVA config with:
  - `severity`: `default` | `secondary` | `warn` | `danger` | `contrast`
- `variant`: `label` (text badge) | `dot` (small indicator) | `circle`
(numeric badge)
- **StatusBadge.vue**: Simplified component using CVA; auto-selects
`dot` variant when no label provided
- **Storybook stories**: Comprehensive coverage of all severities and
variants

## Breaking Changes

- `label` prop is now optional (was required)
- `label` accepts `string | number` (was `string` only)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8202-feat-StatusBadge-add-dot-mode-with-CVA-variants-2ef6d73d36508120beedd04b2c277227)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
2026-01-20 20:59:45 -08:00

28 lines
549 B
Vue

<script setup lang="ts">
import { statusBadgeVariants } from './statusBadge.variants'
import type { StatusBadgeVariants } from './statusBadge.variants'
const {
label,
severity = 'default',
variant
} = defineProps<{
label?: string | number
severity?: StatusBadgeVariants['severity']
variant?: StatusBadgeVariants['variant']
}>()
</script>
<template>
<span
:class="
statusBadgeVariants({
severity,
variant: variant ?? (label == null ? 'dot' : 'label')
})
"
>
{{ label }}
</span>
</template>