# Badge 徽标
### 介绍
出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息。
### 安装
```javascript
import { createApp } from 'vue';
// vue
import { Badge } from '@nutui/nutui';
// taro
import { Badge } from '@nutui/nutui-taro';
const app = createApp();
app.use(Badge);
```
### 代码实例
### 基础用法
:::demo
```html
```
:::
### 最大值
:::demo
```html
```
:::
### 自定义颜色
:::demo
```html
```
:::
### 自定义徽标内容
:::demo
```html
```
:::
### 自定义位置
:::demo
```html
```
:::
### 独立展示
:::demo
```html
```
:::
### Prop
| 字段 | 说明 | 类型 | 默认值 |
|---------|--------------------------------------------|---------|-----------|
| value | 显示的内容 | String | - |
| max | value 为数值时，最大值 | Number | `10000` |
| z-index | 徽标的 z-index 值 | Number | `10` |
| dot | 是否为小点 | Boolean | `false` |
| hidden | 是否隐藏 | Boolean | `false` |
| top | 上下偏移量，支持单位设置，可设置为：5px 等 | Number | `0` |
| right | 左右偏移量，支持单位设置，可设置为：5px 等 | Number | `0` |
| color | 徽标背景颜色 | String | `#fa2c19` |
### Slots
| 名称 | 说明 |
|---------|--------------|
| default | 徽标包裹的子元素 |
| icons | 徽标自定义 |