---
title: Badge 徽标
description: 用于告知用户，该区域的状态变化或者待处理任务的数量。
spline: base
isComponent: true
toc: false
---

### 基础用法

设置 `content` 属性后，`Badge` 会在子元素的右上角显示对应的徽标，也可以通过 `dot` 来显示小红点。

{{ base }}

### 最大值

设置 `max` 属性后，当 `content` 的数值超过最大值时，会自动显示为 `{max}+`。

{{ max }}

### 自定义颜色

通过 `color` 属性来设置徽标的颜色。

{{ color }}

### 不同形状

通过 `shape` 属性可以设置徽标形状，可选项 `circle` 、`round` 、`ribbon`

{{ shape }}

### 自定义位置

通过 `offset` 属性可以自义定徽标偏移位置

{{ offset }}