展示
Badge
一个计数或一种状态，用等宽字，所以它读起来像元数据。
什么时候用它
关于某一条记录的一个事实。如果它说的是“这东西是关于什么的”，那是 Tag。
示例
tones
12DraftDeployedDegradedFailed
说明
一个计数、一个状态、一个小小的行内标记。
等宽而且小，所以它读起来像元数据而不像正文。徽章不可交互——如果它能被点或者被关掉，那它是 Tag 或者一个按钮；给这个东西加 onClick，做出来的是键盘够不着的控件。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| tone | BadgeTone | 'neutral' | `neutral` 是默认值，而且绝大多数时候就是正确答案。三个状态语气是这套系统里唯一的彩色，并且绑定在状态上——一个“因为设计想要个红徽章”所以是红色的徽章，正是这套色阶存在的意义所要防止的。 |
同时接受 HTMLAttributes<HTMLSpanElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
类型
export type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'outline'无障碍
- 不可交互。带 onClick 的 badge 是键盘够不到的控件。
- 状态色都由文字和图标重复表达，所以在单色打印和色盲下含义不丢。