徽标 Badge
在右上角展示数字、文字、小红点。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 DemoBlock 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。
在右上角展示数字、文字、小红点。
何时使用
适用于产品化的新消息、新功能、新服务等内容的提醒，通过醒目视觉形式吸引用户处理。
示例
Badge
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| bordered | 是否增加描边 | boolean | false |
| color | 徽标背景色，等效于设置 --color CSS 变量 | string | - |
| content | 徽标内容：如果传 null undefined '' 或不传，则不显示徽标；如果传 Badge.dot，会显示小红点 | React.ReactNode | typeof Badge.dot | - |
| wrapperClassName | Badge wrap 自定义类名 | string | - |
| wrapperStyle | Badge wrap 自定义样式 | React.CSSProperties | - |
CSS 变量
| 属性 | 说明 | 默认值 | 全局变量 |
|---|---|---|---|
| --color | 徽标背景色 | var(--adm-color-highlight) | --adm-badge-color |
| --right | 相对于最右边，向左的偏移量 | 0 | - |
| --top | 相对于最上边，向下的偏移量 | 0 | - |