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)背景颜色 - 浅版主色