# Badge 徽标

出现在图标或文字右上角的圆形徽标数字。

### 红点样式徽标

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

demo

### 数字样式徽标

含数字的圆形徽标。当需要较强提醒，让用户知道和用户相关提示信息数量时，用来引导用户处理。

demo

### 自定样式徽标

可对显示信息进行自定义设计的徽标，如“热门 hot”“最新 new”等。当需要提示用户徽标所提示的具体内容时。

demo

### 不同尺寸的徽标

demo

### 不同形状的徽标

demo

### 偏移徽标

demo

## 组件设计指南

### 何时使用

当关键内容需要通过醒目的视觉形式吸引用户关注并处理时。

### 组件搭配使用

##### 可与选项卡搭配使用，置于文字段的右上方

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/badge-1.png" />

### 组件常见用法

##### 当用户只需要关注是否有消息，而无需关注消息数量时，可使用红点型徽标。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/badge-2.png"/>
  </div>
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/badge-3.png"/>
  </div>
</div>

<hr />

##### 当提示的信息需要精确显示数量时，应使用带数字的徽标。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/badge-4.png" />

### 推荐/慎用示例

##### 使用带数字的徽标时，需根据场景和信息类型定义最长数量，避免数值过多。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/badge-5.png"/>
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/badge-6.png"/>
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>
