Badge
badge计数角标 · count/max 溢出 + dot + 自定义内容 + 包裹叠加(四角/offset)
用法
包裹计数
包裹子元素时角标叠到右上角，超过 max 显示 99+。
599+
tsx
<>
<Badge count={5}>
<Icon />
</Badge>
<Badge count={1000} max={99}>
<Icon />
</Badge>
</>纯点
dot 只显示小圆点，不显示数字（常用于「未读」提示）。
tsx
<Badge dot tone="danger">
<Icon />
</Badge>语气色
tone 提供 danger（默认）/ brand / success / warning / neutral。
3333
tsx
<>
<Badge count={3} tone="danger" />
<Badge count={3} tone="brand" />
<Badge count={3} tone="success" />
<Badge count={3} tone="warning" />
</>头像在线状态
placement 把角标钉到指定角；content 槽放自定义内容（如绿勾）。
瑚EM
tsx
<>
<Badge dot tone="success" placement="bottom-right">
<Avatar fallback="瑚" />
</Badge>
<Badge tone="success" placement="bottom-right" content={<Check className="size-2.5" />}>
<Avatar fallback="EM" />
</Badge>
</>何时用
在图标/头像等宿主上叠加未读计数、红点或小勾时用（消息数、在线点、绿勾认证）。它表达「数量/有无」并叠加到宿主四角；要表达「分类/状态文字标签且可移除」用 Chip；只要一个独立的语义状态圆点用 Dot。
导入
ts
import { Badge } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| count | number | — | 数字计数；为 0 时默认隐藏（除非 showZero）。 |
| max | number | 99 | 超过则显示 max+。 |
| dot | boolean | false | 仅显示小圆点不显示数字（优先级高于 count）。 |
| showZero | boolean | false | count=0 仍显示。 |
| invisible | boolean | — | 强制隐藏角标，保留被包裹子元素。 |
| tone | "neutral"｜"brand"｜"success"｜"warning"｜"danger" | danger | 语气色（默认通知红）。 |
| size | "sm"｜"md" | md | 尺寸。 |
| placement | "top-right"｜"top-left"｜"bottom-right"｜"bottom-left" | top-right | 有 children 时角标叠加的角位。 |
| offset | [number, number] | — | 角标位置微调 [x, y] px（正值=右/下），圆形宿主常用来外推贴边。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| content | ReactNode | 自定义角标内容（如图标 ✓），优先级最高，覆盖 count/dot。 |
| children | ReactNode | 被叠加的宿主元素；不传则角标独立渲染。 |
禁忌 / 坑
暂无已知坑。优先级链记牢：content > dot > count——同时传只生效最高者。count=0 默认隐藏整个角标，要显示「0」须显式 showZero。圆形宿主（头像）四角贴边常需 offset 外推几像素。候选坑 workflow-badge-denominator-numerator-alignment 讲的是工作流进度「分子/分母」对齐，与本计数角标无关，不适用。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Dot
Playground
5
<Badge count={5} max={99} tone="danger" placement="top-right">
<Icon />
</Badge>