Badge
@cloudflare/kumo

Badge

用于显示状态、分类或元数据的小型标签。

PrimarySecondaryErrorSuccessWarningInfoOutlineBeta
import { Badge } from "@cloudflare/kumo";

export function BadgeSemanticVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="primary">Primary</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="error">Error</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="beta">Beta</Badge>
    </div>
  );
}

安装

批量导入

import { Badge } from "@cloudflare/kumo";

按需导入

import { Badge } from "@cloudflare/kumo/components/badge";

用法

import { Badge } from "@cloudflare/kumo";

export default function Example() {
  return <Badge variant="secondary">New</Badge>;
}

示例

主要 Badge

PrimarySecondaryErrorSuccessWarningInfoOutlineBeta
import { Badge } from "@cloudflare/kumo";

export function BadgeSemanticVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="primary">Primary</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="error">Error</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="beta">Beta</Badge>
    </div>
  );
}

其他颜色变体

当语义 Badge 不足以表达所要传达的含义或状态时，可使用面向特定产品或用例的其他颜色变体。

NeutralRedGreenOrangeTealBluePurple
import { Badge } from "@cloudflare/kumo";

export function BadgeColorVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="red">Red</Badge>
      <Badge variant="green">Green</Badge>
      <Badge variant="orange">Orange</Badge>
      <Badge variant="teal">Teal</Badge>
      <Badge variant="blue">Blue</Badge>
      <Badge variant="purple">Purple</Badge>
    </div>
  );
}

圆点 Badge

使用 appearance="dot" 通过彩色圆点呈现微妙的指示状态。支持 success、warning、error 和 neutral 变体。

HealthyWarningErrorNeutral
import { Badge } from "@cloudflare/kumo";

export function BadgeDotDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="success" appearance="dot">
        Healthy
      </Badge>
      <Badge variant="warning" appearance="dot">
        Warning
      </Badge>
      <Badge variant="error" appearance="dot">
        Error
      </Badge>
      <Badge variant="neutral" appearance="dot">
        Neutral
      </Badge>
    </div>
  );
}

用于句中

WorkersNew

import { Badge } from "@cloudflare/kumo";

export function BadgeInSentenceDemo() {
  return (
    <p className="flex items-center gap-2">
      Workers
      <Badge variant="secondary">New</Badge>
    </p>
  );
}

带图标

实心 Badge 可通过 icon 接受一个 Phosphor 图标组件或 React 元素。圆点 Badge 使用其状态圆点，不接受图标。

Verified
import { Badge } from "@cloudflare/kumo";
import { CheckCircleIcon } from "@phosphor-icons/react";

export function BadgeIconDemo() {
  return (
    <Badge icon={CheckCircleIcon} variant="success">
      Verified
    </Badge>
  );
}

可跳转的 Badge

将 Badge 包装在 Link 中即可使其可跳转。当祖先链接被悬停时，Badge 会添加一个圆环。

View changelog
import { Badge, Link } from "@cloudflare/kumo";

export function BadgeLinkDemo() {
  return (
    <Link href="/changelog" variant="plain">
      <Badge variant="outline">View changelog</Badge>
    </Link>
  );
}

API 参考

PropTypeDefaultDescription
variant"primary" | "secondary" | "error" | "warning" | "success" | "destructive" | "info" | "beta" | "outline" | "red" | "green" | "neutral" | "orange" | "purple" | "teal" | "teal-subtle" | "blue""primary"

徽章的配色变体。推荐的语义化变体：

  • "primary" — 主色调徽章
  • "secondary" — 次要色调徽章
  • "error" — 错误徽章
  • "warning" — 警告徽章
  • "success" — 成功徽章
  • "info" — 信息徽章

其他令牌变体：

  • "red"、"orange"、"green"、"teal"、"blue"、"purple"、"neutral"
  • "teal-subtle"、"neutral-subtle"
  • "inverted"
  • "outline" — 带基础背景的边框徽章
  • "beta" — 用于测试版/实验性功能的虚线边框徽章
classNamestring-

通过 cn() 合并的额外 CSS 类。

childrenReactNode-

渲染在徽章内部的内容。

appearance"filled" | "dot""filled"

徽章的视觉外观。

  • "filled" — 使用变体颜色的填充背景（默认）
  • "dot" — 带彩色圆点的描边徽章。仅 success、warning、error 和 neutral 变体显示圆点。圆点徽章不接受图标。
iconReactNode-

来自 @phosphor-icons/react 的图标或 React 元素。在子内容之前渲染。