简介

一个用于为内容添加标签或进行分类的小型视觉元素。

用法

import { Badge } from "../components/ui";

export default function MyPage() {
  return (
    <Badge colorPalette="blue" variant="solid">
      New
    </Badge>
  );
}

CMS 页面构建器

该组件在 页面构建器 (content/pages/*.json) 中作为 badge 区块提供：

{
  "type": "badge",
  "text": "New",
  "colorPalette": "blue",
  "variant": "solid"
}

属性

属性	类型	说明
children	any	组件内部渲染的内容。
class	string	自定义 CSS 类。
colorPalette	string	badge 的色彩主题。

| variant | `"solid" \ | "subtle" \ | "surface" \ | "outline"` | 视觉样式。 |

| size | `"sm" \ | "md" \ | "lg" \ | "xl" \ | "2xl"` | badge 的尺寸。 |

| interactive | boolean | 是否启用客户端水合。 |