Badge 徽标

主要次要错误成功警告信息轮廓Beta

import { Badge } from "@lark-ui/core";

export function BadgeSemanticVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="primary">主要</Badge>
      <Badge variant="secondary">次要</Badge>
      <Badge variant="error">错误</Badge>
      <Badge variant="success">成功</Badge>
      <Badge variant="warning">警告</Badge>
      <Badge variant="info">信息</Badge>
      <Badge variant="outline">轮廓</Badge>
      <Badge variant="beta">Beta</Badge>
    </div>
  );
}

安装

统一导出

import { Badge } from "@lark-ui/core";

按需导出

import { Badge } from "@lark-ui/core/components/badge";

用法

import { Badge } from "@lark-ui/core";

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

示例

主要徽标

主要次要错误成功警告信息轮廓Beta

import { Badge } from "@lark-ui/core";

export function BadgeSemanticVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="primary">主要</Badge>
      <Badge variant="secondary">次要</Badge>
      <Badge variant="error">错误</Badge>
      <Badge variant="success">成功</Badge>
      <Badge variant="warning">警告</Badge>
      <Badge variant="info">信息</Badge>
      <Badge variant="outline">轮廓</Badge>
      <Badge variant="beta">Beta</Badge>
    </div>
  );
}

其他颜色变体

针对特定产品或使用场景提供的其他颜色变体，适用于语义徽标不足以表达预期含义或状态的场合。

中性红色绿色橙色青色蓝色紫色

import { Badge } from "@lark-ui/core";

export function BadgeColorVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="neutral">中性</Badge>
      <Badge variant="red">红色</Badge>
      <Badge variant="green">绿色</Badge>
      <Badge variant="orange">橙色</Badge>
      <Badge variant="teal">青色</Badge>
      <Badge variant="blue">蓝色</Badge>
      <Badge variant="purple">紫色</Badge>
    </div>
  );
}

圆点徽标

使用 appearance="dot" 可以得到带彩色圆点的轻量状态指示器。支持 success、warning、error 和 neutral 变体。

健康警告错误中性

import { Badge } from "@lark-ui/core";

export function BadgeDotDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="success" appearance="dot">
        健康
      </Badge>
      <Badge variant="warning" appearance="dot">
        警告
      </Badge>
      <Badge variant="error" appearance="dot">
        错误
      </Badge>
      <Badge variant="neutral" appearance="dot">
        中性
      </Badge>
    </div>
  );
}

用于句中

Workers全新

import { Badge } from "@lark-ui/core";

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

带图标

实心徽标可通过 icon 接收 Phosphor 图标组件或 React 元素。圆点徽标使用自身的状态圆点，不接受图标。

已验证

import { Badge } from "@lark-ui/core";
import { CheckCircleIcon } from "@phosphor-icons/react";

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

链接徽标

用 Link 包裹徽标使其可导航。当上级链接被悬停时，徽标会显示一圈描边。

查看更新日志

import { Badge, Link } from "@lark-ui/core";

export function BadgeLinkDemo() {
  return (
    <Link href="/changelog" variant="plain">
      <Badge variant="outline">查看更新日志</Badge>
    </Link>
  );
}

API 参考

属性	类型	默认值	说明
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"` — 信息徽标其他 token 变体： - `"red"`、`"orange"`、`"green"`、`"teal"`、`"blue"`、`"purple"`、`"neutral"` - `"teal-subtle"`、`"neutral-subtle"` - `"inverted"` - `"outline"` — 使用基础背景的描边徽标 - `"beta"` — 用于 beta/实验性功能的虚线边框徽标
appearance	`"filled" \| "dot"`	`"filled"`	徽标的外观样式。 - `"filled"` — 使用变体颜色的填充背景（默认） - `"dot"` — 带彩色圆点的描边徽标。只有 `success`、`warning`、`error` 和 `neutral` 变体会显示圆点。圆点徽标不接受图标。
dotColor	`"none" \| "success" \| "warning" \| "error" \| "neutral"`	`"none"`	-
className	`string`	-	通过 `cn()` 合并的额外 CSS 类名。
children	`ReactNode`	-	渲染在徽标内部的内容。
icon	`Icon \| ReactNode`	-	来自 `@phosphor-icons/react` 的图标或 React 元素。渲染在子元素之前。

Lark