Badge
徽标：在宿主元素角落展示 count 数字/dot 小圆点/自定义节点；无 children 时可独立使用。支持 type/theme/position/overflowCount。
如何引入
import { Badge } from '@chenzy-design/svelte';基本用法
count 为基本类型；dot 显示小圆点（优先于 count）；count 为节点时直接渲染；也可传字符串。
BM 5 YL XZ WF NEW
显示最大值
设置 overflowCount，实际数值超过时以 {overflowCount}+ 格式显示。
ZH 99 HS 100 DY 10+ TT 999+
徽标位置
position 支持 leftTop / leftBottom / rightTop（默认）/ rightBottom。
ZH VIP HS VIP DY VIP TT VIP
徽标样式
theme 支持 solid（默认）/ light / inverted，作用于 count 与 dot。
XZ 5 YB 5 LX 5 YZ HW
XM
徽标类型
type 支持 primary（默认）/ secondary / tertiary / warning / danger / success。
MR 5 YL 5 ZW 5 JL 5 RT 5 YF
独立使用
Badge 作为独立元素时可单独使用，常与文字组合表达状态。
5 NEW 10+ 进行中 processing 信息 info 成功 success 提醒 warning 错误 error
API 参考
Badge
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
count | 徽标内容；数字/字符串按 overflowCount 处理，Snippet 时直接渲染 | number|string|Snippet | undefined |
dot | 显示小圆点，优先于 count | boolean | false |
type | — | 'primary'|'secondary'|'tertiary'|'danger'|'warning'|'success' | 'primary' |
theme | — | 'solid'|'light'|'inverted' | 'solid' |
position | — | 'leftTop'|'leftBottom'|'rightTop'|'rightBottom' | 'rightTop' |
overflowCount | 超出显示 {n}+ | number | undefined |
countStyle | 徽标内容区域样式 | string | undefined |
countClass | 徽标内容区域类名 | string | undefined |
style | 徽标内容区域内联样式（优先于 countStyle） | string | undefined |
class | 根节点类名 | string | undefined |
onClick | — | (e: MouseEvent) => void | undefined |
onMouseEnter | — | (e: MouseEvent) => void | undefined |
onMouseLeave | — | (e: MouseEvent) => void | undefined |
children | 宿主子元素；省略时独立使用 | Snippet | undefined |
Slots
| 名称 | 说明 |
|---|---|
children | 被徽标包裹的宿主元素 |
count | 自定义徽标内容（count 为 Snippet 时） |
Accessibility
- Badge 为纯展示元素；不进入 Tab 序，语义由宿主文案承载。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-badge-danger-inverted-text-default | var(--cd-color-danger) | 文字颜色 - 白底 |
--cd-color-badge-danger-light-bg-default | var(--cd-color-danger-light-default) | 背景颜色 - 浅版危险 |
--cd-color-badge-danger-light-text-default | var(--cd-color-danger) | 文字颜色 - 浅版危险 |
--cd-color-badge-danger-solid-bg-default | var(--cd-color-danger) | 背景颜色 - 危险 |
--cd-color-badge-default-bg-default | var(--cd-color-bg-1) | 背景颜色 - 默认 |
--cd-color-badge-default-border-default | var(--cd-color-bg-1) | 描边颜色 - 默认 |
--cd-color-badge-default-light-bg-default | var(--cd-color-bg-2) | 背景颜色 - 浅版 |
--cd-color-badge-default-text-default | var(--cd-color-bg-2) | 文字颜色 - 默认 |
--cd-color-badge-primary-inverted-text-default | var(--cd-color-primary) | 文字颜色 - 白底 |
--cd-color-badge-primary-light-bg-default | var(--cd-color-primary-light-default) | 背景颜色 - 浅版主色 |