---
url: /components/badge.md
---
# Badge 徽标

`EvBadge` 是附在其它元素角上的计数徽标：未读消息数、通知数等。提供数字上限折叠（`99+`）与
纯圆点两种形态，底色可用 `color` 覆写以适配不同场景。

## 基础用法

```vue
<span style="position:relative; display:inline-flex;">
  <EvIconButton icon="mail" variant="soft" />
  <EvBadge value="7" style="position:absolute; top:-6px; right:-6px;" />
</span>
```

## 上限折叠

```vue
<EvBadge value="42" />
<EvBadge value="150" /> <!-- 渲染为 99+ -->
<EvBadge value="1500" :max="999" /> <!-- 渲染为 999+ -->
```

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 计数值 | string / number | — |
| max | 上限，数值超过时显示 `max+` | number | `99` |
| dot | 圆点模式（不显示数字） | boolean | `false` |
| color | 自定义底色 | string | — |

### 插槽

| 插槽 | 说明 |
| --- | --- |
| default | 覆写徽标内容（dot 模式下无效） |