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"Color variant of the badge. Recommended semantic variants: - `"primary"` — Primary badge - `"secondary"` — Secondary badge - `"error"` — Error badge - `"warning"` — Warning badge - `"success"` — Success badge - `"info"` — Info badge Additional token variants: - `"red"`, `"orange"`, `"green"`, `"teal"`, `"blue"`, `"purple"`, `"neutral"` - `"teal-subtle"`, `"neutral-subtle"` - `"inverted"` - `"outline"` — Bordered badge with the base background - `"beta"` — Dashed-border badge for beta/experimental features
classNamestring-Additional CSS classes merged via `cn()`.
childrenReactNode-Content rendered inside the badge.
appearance"filled" | "dot""filled"Visual appearance of the badge. - `"filled"` — Filled background using the variant color (default) - `"dot"` — Outlined badge with a colored circle dot. Only `success`, `warning`, `error`, and `neutral` variants show a dot. Dot badges do not accept icons.
iconReactNode-Icon from `@phosphor-icons/react` or a React element. Rendered before children.