示例
直接操作示例，查看组件在具体任务中的状态与反馈。
状态与分类
运行中等待复核执行失败已归档需要跨团队协作确认的长期迁移任务
带图标的状态
任务状态
等待设计与工程团队共同确认不在当前公开版本的支持范围内
使用建议
表达简短状态或分类
适合紧邻对象展示短标签，例如运行状态、类型或版本；完整解释应放在邻近正文中。
保持语义而非装饰
颜色只用于辅助识别，标签文本仍需独立传达含义，并与业务中的状态词保持一致。
把长解释留给正文
Badge 只承载一眼可读的状态词或分类；原因、影响和处理方式应写在相邻正文中。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseBadge } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Badge 不会自动补充状态语义；宿主必须提供可独立理解的文本，并避免只依赖颜色传达结果。
- Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseBadgeProps extends HTMLAttributes<HTMLSpanElement> {
children?: ReactNode;
label?: ReactNode;
icon?: ReactNode;
tone?: BaseControlTone;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseBadgeClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseBadge 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
label | 徽标内显示的文字或自定义标签内容。 | ReactNode | — |
icon | 显示在主要内容旁的图标。 | ReactNode | — |
tone | 组件使用的语义色调。 | BaseControlTone | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseBadgeClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |