组件

Badge

用于状态标签、分类标签和轻量信息标记

Badge

Badge 用于承载短标签、状态和轻量统计。

导入

import { Badge } from "@downcity/ui";

最小示例

import { Badge } from "@downcity/ui";

export function StatusBadge() {
  return <Badge variant="secondary">Running</Badge>;
}

可用变体

  • default
  • secondary
  • destructive
  • outline
  • ghost
  • link

常见用法

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>
  );
}

使用建议

  • 表示状态时优先使用 secondarydestructive
  • 作为分类标签时优先使用 outline
  • 不要把 Badge 当作主操作按钮

相关导出

  • Badge
  • badgeVariants

继续阅读