Badge

Badge 是一个非交互的状态标签，用来标注状态、分类或数量，例如「管理员」「Beta」。下方预览由 pingo 引擎实时渲染，并跟随站点主题切换明暗。

用法

import { createElement } from "@dopejs/pingo";
import { Badge } from "@dopejs/pingo-ui";

root.render(createElement(Badge, { children: "Beta" }));

示例

变体

四种变体覆盖常见语义：default（强调）、secondary（弱化）、destructive（错误/危险）、outline（描边）。预览中已按顺序展示。

createElement(Badge, { children: "只读", variant: "secondary" });

搭配其他组件

Badge 常作为列表行或卡片的 trailing 元素，与 Avatar、ListRow 组合使用：

createElement(ListRow, {
  title: "张三",
  leading: createElement(Avatar, { fallback: "张", size: 32 }),
  trailing: createElement(Badge, { children: "管理员" }),
  onPress: () => {},
});

Props

无障碍

Badge 不响应指针与键盘，是纯展示元素。当文本不足以传达含义（如纯数字角标）时，用 semanticLabel 提供完整说明。