---
title: Badge - 微标数
path: /Badge
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 4
  title: 数据展示
  path: /dataShow
---

一般出现在图标或文字的右上角。提供及时、重要的信息提示。

## 红点样式的徽标

仅显示为圆点的徽标，有图标时位于图标右上角，无图标时位于文字标题后侧。弱提示场景下，不显示数量，需要用户去手动点击查看进行消除。

<code src="./demos/base.tsx" background="#fff" height="400px"/>

## 数字样式的徽标

含数字的徽标，适用于需要较强提醒的场景，直接提醒用户相关信息数量。

<code src="./demos/number.tsx" background="#fff" height="400px"/>

## 自定样式的徽标

可对显示信息进行自定义配置，如展示为“热门 hot”“最新 new”等。

<code src="./demos/config.tsx" background="#fff" height="400px"/>

## 不同尺寸的徽标

提供标准（默认）、小两种尺寸。

<code src="./demos/size.tsx" background="#fff" height="400px"/>

## API

### Badge

| 参数          | 说明                                                                     | 类型                                                           | 默认值 |
| ------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------- | ------ |
| color         | 自定义小圆点的颜色                                                       | string                                                         | -      |
| count         | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode                                                      | -      |
| dot           | 不展示数字，只有一个小红点                                               | boolean                                                        | false  |
| offset        | 设置状态点的位置偏移                                                     | \[number, number]                                              | -      |
| overflowCount | 展示封顶的数字值                                                         | number                                                         | 99     |
| showZero      | 当数值为 0 时，是否展示 Badge                                            | boolean                                                        | false  |
| size          | 在设置了 `count` 的前提下有效，设置小圆点的大小                          | `default` \| `small`                                           | -      |
| status        | 设置 Badge 为状态点                                                      | `success` \| `processing` \| `default` \| `error` \| `warning` | -      |
| text          | 在设置了 `status` 的前提下有效，设置状态点的文本                         | ReactNode                                                      | -      |
| title         | 设置鼠标放在状态点上时显示的文字                                         | string                                                         | -      |
| type(可选)    | 设置状态点的位置偏移(增加了`outer`属性，自动外边框对齐)                  | `[number, number]` \| `outer`                                  | false  |

### Badge.Ribbon

| 参数      | 说明                                                      | 类型             | 默认值 |
| --------- | --------------------------------------------------------- | ---------------- | ------ |
| color     | 自定义缎带的颜色                                          | string           | -      |
| placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end`  |
| text      | 缎带中填入的内容                                          | ReactNode        | -      |