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
2.5 KiB
title, description, sidebar
| title | description | sidebar |
|---|---|---|
| Badge | Small status or label component for visual categorization | 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
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
<Badge>Default</Badge>
Status Indicators
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Failed</Badge>
<Badge variant="info">Draft</Badge>
Count Badge
<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
<div class="flex gap-2">
<Badge variant="outline">React</Badge>
<Badge variant="outline">TypeScript</Badge>
<Badge variant="outline">Tailwind</Badge>
</div>
Review Status
<Badge variant="review">In Review</Badge>
Gradient Badge
<Badge variant="gradient">Featured</Badge>