mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-06 16:31:12 +08:00
f389e3e6dd
Backend:
- Fix readLegacyFiles to handle { name, prefix }[] role format
- Add roles backfill in getEffectiveTeamMeta when meta.json exists
- Ensure pipeline_stages and roles flow correctly to API response
Team Skills:
- Add pipeline metadata initialization to all 16 team skill coordinator roles
- Each skill now reports pipeline_stages and roles to meta.json at session init
Documentation:
- Update command references and component documentation
- Add numerical-analysis-workflow skill spec
- Sync zh/en translations for commands and components
120 lines
2.5 KiB
Markdown
120 lines
2.5 KiB
Markdown
---
|
|
title: Badge
|
|
description: Small status or label component for visual categorization
|
|
sidebar: auto
|
|
---
|
|
|
|
# Badge
|
|
|
|
## Overview
|
|
|
|
The Badge component is used to display status, categories, or labels in a compact form. It's commonly used for tags, status indicators, and counts.
|
|
|
|
## Live Demo
|
|
|
|
:::demo badge-variants
|
|
Shows all available badge variants including default, secondary, destructive, outline, success, warning, info, review, and gradient
|
|
:::
|
|
|
|
## Props
|
|
|
|
<PropsTable :props="[
|
|
{ name: 'variant', type: '\'default\' | \'secondary\' | \'destructive\' | \'outline\' | \'success\' | \'warning\' | \'info\' | \'review\' | \'gradient\'', required: false, default: '\'default\'', description: 'Visual style variant' },
|
|
{ name: 'className', type: 'string', required: false, default: '-', description: 'Custom CSS class name' },
|
|
{ name: 'children', type: 'ReactNode', required: true, default: '-', description: 'Badge content' }
|
|
]" />
|
|
|
|
## Variants
|
|
|
|
### Default
|
|
|
|
Primary badge with theme color background. Used for primary labels and categories.
|
|
|
|
### Secondary
|
|
|
|
Muted badge for secondary information.
|
|
|
|
### Destructive
|
|
|
|
Red badge for errors, danger states, or negative status.
|
|
|
|
### Outline
|
|
|
|
Badge with only text and border, no background. Used for subtle labels.
|
|
|
|
### Success
|
|
|
|
Green badge for success states, completed actions, or positive status.
|
|
|
|
### Warning
|
|
|
|
Yellow/amber badge for warnings, pending states, or caution indicators.
|
|
|
|
### Info
|
|
|
|
Blue badge for informational content or neutral status.
|
|
|
|
### Review
|
|
|
|
Purple badge for review status, pending review, or feedback indicators.
|
|
|
|
### Gradient
|
|
|
|
Badge with brand gradient background for featured or highlighted items.
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Badge
|
|
|
|
```vue
|
|
<Badge>Default</Badge>
|
|
```
|
|
|
|
### Status Indicators
|
|
|
|
```vue
|
|
<Badge variant="success">Active</Badge>
|
|
<Badge variant="warning">Pending</Badge>
|
|
<Badge variant="destructive">Failed</Badge>
|
|
<Badge variant="info">Draft</Badge>
|
|
```
|
|
|
|
### Count Badge
|
|
|
|
```vue
|
|
<div class="relative">
|
|
<Bell />
|
|
<Badge variant="destructive" class="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs">
|
|
3
|
|
</Badge>
|
|
</div>
|
|
```
|
|
|
|
### Category Tags
|
|
|
|
```vue
|
|
<div class="flex gap-2">
|
|
<Badge variant="outline">React</Badge>
|
|
<Badge variant="outline">TypeScript</Badge>
|
|
<Badge variant="outline">Tailwind</Badge>
|
|
</div>
|
|
```
|
|
|
|
### Review Status
|
|
|
|
```vue
|
|
<Badge variant="review">In Review</Badge>
|
|
```
|
|
|
|
### Gradient Badge
|
|
|
|
```vue
|
|
<Badge variant="gradient">Featured</Badge>
|
|
```
|
|
|
|
## Related Components
|
|
|
|
- [Card](/components/ui/card)
|
|
- [Button](/components/ui/button)
|
|
- Avatar
|