---
title: Badge
subtitle: 徽标
path: component/badge
group: 基础控件
---

## Badge 徽标

位于主体对象右上角的提示元素，表示主体的数量变化

### 使用指南

#### 建议
- 当下级页面有内容、状态变化时，在入口处展示，起到提示变化的作用；
- 需要提示变化的具体数量时（如订单数量、消息数量），建议使用带数字的徽标样式；
- 需要提示状态的变化时（如订单状态变化），建议使用红点的徽标样式；
- 当点击下级页面并已读变化内容后，徽标消失（或减少相应的已读数量）；

#### 禁用
- 同一层级的入口需要统一徽标样式，原则上同一层级入口不出现“数字徽标+红点徽标”的混用；

### API

| 参数     |   说明             | 类型     | 是否必须 | 默认值        | 备选值            |
| ---------| ----------------- | ------  | -------------|----------------- |----------|
| count    | 消息条数            | `number`     | 否  | `0`          |                  |
| maxCount | 最大完全显示消息条数  | `number`     | 否 | `99`         |                  |
| dot      | 是否显示为小红点     | `bool`    | 否  | `false`      | `true`,`false`   |
| showZero | 消息数为0时是否显示  | `bool`    | 否 | `false`      | `true`,`false`  |
| offset   | 偏移量，格式为 `[x, y]` | `array` | 否 | | |
| style    | 自定义样式          | `object`  | 否 |  | |
| className| 自定义额外类名      | `string`  | 否 | `''`         |                  |