Badge 设计文档
徽标:在宿主元素角落展示 count 数字/dot 小圆点/自定义节点;无 children 时可独立使用。支持 type/theme/position/overflowCount。
← API 文档使用建议
徽标:在宿主元素角落展示 count 数字/dot 小圆点/自定义节点;无 children 时可独立使用。支持 type/theme/position/overflowCount。
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) | 背景颜色 - 浅版主色 |