展示
Badge - 徽章
一个计数或一种状态，用等宽字，所以它读起来像元数据。
用法
什么时候用它
关于某一条记录的一个事实。如果它说的是“这东西是关于什么的”，那是 Tag。
import { Badge } from '@misoto22/folio'说明
一个计数、一个状态、一个小小的行内标记。
等宽而且小，所以它读起来像元数据而不像正文。徽章不可交互——如果它能被点或者被关掉，那它是 Tag 或者一个按钮；给这个东西加 onClick，做出来的是键盘够不着的控件。
结构
| 部件 | 说明 |
|---|---|
| 标记盒必填 | 那个 <span>：inline-flex，--radius-sm 圆角，12px 等宽字并放宽字距。等宽这张脸就是全部信号——它告诉读者这是元数据，而不是它所在那句话里的一个词。 |
| 底色必填 | tone 的填充——neutral 是 --stone，三种状态色分别是 --ok、--warn、--danger 的浅色调，outline 则什么都不填。 |
| 边框必填 | 始终画出来，除 outline 外一律透明，所以这个盒子无论哪种 tone 都占着那一像素，运行时换 tone 也不会挪动它旁边的任何东西。 |
| 内容必填 | children，彼此之间 6px 间距——所以摆在文字旁边的 StatusDot 或 Kbd，用不着包一层就有了自己的间距。 |
实践建议
推荐
- 除非这个 badge 说的是一种状态，否则 tone 就留在 neutral：三种状态色是这套系统唯一花掉的彩度，而一个只因为页面想要红色就变红的 badge，正是这套色阶存在要防的那件事。
- badge 本来就落在 --stone 上时，改用 outline——其余每种 tone 都自己填底，而 stone 上的 neutral badge 是一块完全看不见边界的标记。
- 只放一个计数、一个词，或者一个短状态。它是按一行排的 12px 等宽字，所以塞进去的一个短语，就是用元数据的字脸排出来的散文，还会在一个从没为第二行留过位置的盒子里折行。
避免
- 一排 badge 是用错组件画出来的 Tag 列表：Badge 没有 active 状态，所以它变成的那条筛选栏，没法显示哪一个筛选面是开着的。
- neutral 的 Badge 和未选中的 Tag 是同一个圆角、同一份内边距、同一种 12px 等宽字，中间只差一级墨色——所以把状态和主题混在一排，读出来就是一长串分不出彼此的标记。
- 这里没有关闭这回事。写进 children 的 × 是可访问名称里的文字，所以这个 badge 会被念成「beta ×」，而它宣称的那个关闭并不存在。
示例
tones
徽标拥有的每一种 tone，中性的默认排在最前。除非这个徽标命名的是一个状态，否则就把它留在 neutral 上：那三个状态色是这套系统唯一花出去的彩度，而一个「因为页面想要红色所以是红色」的徽标，正是这套色阶存在要防住的东西。
12DraftDeployedDegradedFailed
with a status dot
圆点在这枚芯片里面，而不是旁边。Badge 会把它的子元素按 6px 拉开，所以 StatusDot 不需要自己再套一层——而且圆点是 aria-hidden 的，所以旁边那个词必须自己把状态说出来。用在行本身已经提供了主语的表格单元格里；一个状态如果就是一整行，那是 StatusPill。
Deployed Degraded Failed
on a stone ground
同样两个词，放在其中一个会消失进去的底色上。neutral 拿 --stone 填充自己，边框画成透明，所以在一块 stone 面板上，它是一枚完全看不见边的芯片；outline 才是那个保住自己细线的 tone。只要徽标坐在一个有填充的表面上，就拿 outline。
NeutralOutline
类型
export type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'outline'无障碍
- 不可交互。带 onClick 的 badge 是键盘够不到的控件。
- 状态色都由文字和图标重复表达，所以在单色打印和色盲下含义不丢。