Badge 徽标

Badge 把一个数字或小圆点钉在另一个元素的右上角，比如头像或图标按钮；也可以单独跟在文字旁边。数字变化时，每一位会滚动到新值。

演示

把徽标所属的元素包在里面。可以是数字、小圆点或一小段文字。

type 选择颜色角色。default 是错误红，因为徽标通常表示“这里有事要处理”。

超过 max 的数字显示为 99+。值为 0 时徽标隐藏，除非设置了 showZero。

每一位数字滚动到新值；show 可以隐藏徽标，但保留它所在的元素。

processing 加一圈缓慢的脉冲，表示事情还在进行。

color 覆盖填充色（文字变为白色），value 也可以是任意节点，offset 把徽标从角上挪开一点。

没有子元素时徽标按行内显示，比如放在导航文字旁边。

名称	类型	默认值	说明	版本
`value`	`ReactNode`	`undefined`	数字（变化时滚动，受 `max` 限制）、字符串或任意节点。纯文本的值同时作为 tooltip。	未发布
`max`	`number`	`undefined`	超过它的数字显示为 `${max}+`。	未发布
`dot`	`boolean`	`false`	显示小圆点而不是值。	未发布
`type`	`default \| primary \| accent \| info \| success \| warning \| error`	`default`	颜色角色。`default` 是错误红。	未发布
`show`	`boolean`	`true`	隐藏徽标，保留被包裹的元素。	未发布
`showZero`	`boolean`	`false`	数值为 0 或更小时也显示。	未发布
`processing`	`boolean`	`false`	加一圈缓慢重复的脉冲。	未发布
`color`	`string`	`undefined`	覆盖填充色，文字变为白色。	未发布
`offset`	`[x, y]`	`undefined`	把徽标从角上挪开。数字单位是 px，字符串可以是任意 CSS 长度。	未发布
`children`	`ReactNode`	`undefined`	徽标所在的元素。没有时按行内显示。	未发布

Badge 同样支持原生 span 属性和 ref。如果徽标的含义没法从上下文读出来，请给包裹元素加 aria-label，比如“3 条未读消息”。