---
title: Badge 徽标数 (done)
order: 20
group:
path: /components
nav:
title: 组件
path: /components
---
## 使用
### 使用原则
- 徽标使用场景：一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数。
- 状态徽标：灰色表示未开始、待操作或关闭状态；蓝色表示操作中；黄色表示操作异常；绿色表示操作成功；红色表示操作失败。
### 基本使用
count 为 0 时，默认不显示。可以设置 `showZero` 为 `true` 来显示。
```jsx
import React from 'react';
import { Badge, Icons } from 'baas-ui';
const { ClockCircleIcon } = Icons;
const badgeBlockStyle = {
width: 32,
height: 32,
background: '#eee',
display: 'inline-block',
verticalAlign: 'middle',
};
const badgeStyle = { display: 'inline-block', marginRight: 20 };
export default () => (
);
```
### 封顶数字
默认封顶数字 `overflowCount` 为 99
```jsx
import React from 'react';
import { Badge } from 'baas-ui';
const badgeBlockStyle = {
width: 32,
height: 32,
background: '#eee',
display: 'inline-block',
verticalAlign: 'middle',
};
const badgeStyle = { display: 'inline-block', marginRight: 20 };
export default () => (
);
```
### 小红点
```jsx
import React from 'react';
import { Badge } from 'baas-ui';
const badgeBlockStyle = {
width: 32,
height: 32,
background: '#eee',
display: 'inline-block',
verticalAlign: 'middle',
};
const badgeStyle = { display: 'inline-block', marginRight: 20 };
export default () => (
);
```
### 不同的颜色
```jsx
import React from 'react';
import { Badge } from 'baas-ui';
const badgeBlockStyle = {
width: 32,
height: 32,
background: '#eee',
display: 'inline-block',
verticalAlign: 'middle',
};
const badgeStyle = { display: 'inline-block', marginRight: 20 };
export default () => (
);
```
### 直接使用
```jsx
import React from 'react';
import { Badge } from 'baas-ui';
const badgeStyle = { display: 'inline-block', marginRight: 20 };
export default () => (
);
```
### 状态徽标
```jsx
import React from 'react';
import { Badge } from 'baas-ui';
const badgeStyle = { display: 'block', marginBottom: 20 };
export default () => (
);
```
## API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------- | ------- | ---- |
| color | 自定义小圆点的颜色 | string | - | |
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode | | |
| dot | 不展示数字，只有一个小红点 | boolean | false | |
| offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - | |
| overflowCount | 展示封顶的数字值 | number | 99 | |
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | '' | |
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' | |
| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | |