组件
Badge
用于状态标签、分类标签和轻量信息标记
Badge
Badge 用于承载短标签、状态和轻量统计。
导入
import { Badge } from "@downcity/ui";最小示例
import { Badge } from "@downcity/ui";
export function StatusBadge() {
return <Badge variant="secondary">Running</Badge>;
}可用变体
defaultsecondarydestructiveoutlineghostlink
常见用法
import { Badge, Card, CardContent } from "@downcity/ui";
export function AgentCard() {
return (
<Card className="max-w-sm">
<CardContent className="flex items-center justify-between">
<span>Research Agent</span>
<Badge variant="secondary">Online</Badge>
</CardContent>
</Card>
);
}使用建议
- 表示状态时优先使用
secondary或destructive - 作为分类标签时优先使用
outline - 不要把
Badge当作主操作按钮
相关导出
BadgebadgeVariants