组件

Badge 徽章

行内状态标签，可贴在标题、按钮或列表项旁。

变体

默认 New · 主色 Beta · 弱化草稿

<p class="pvs-m-0">默认 <span class="pvs-badge">New</span> · 主色 <span class="pvs-badge pvs-badge--primary">Beta</span> · 弱化 <span class="pvs-badge pvs-badge--muted">草稿</span>
</p>

语义色

成功 / 警告 / 错误 / 信息浅底标签。

成功警告错误信息

<p class="pvs-m-0">
  <span class="pvs-badge pvs-badge--success">成功</span>
  <span class="pvs-badge pvs-badge--warning">警告</span>
  <span class="pvs-badge pvs-badge--danger">错误</span>
  <span class="pvs-badge pvs-badge--info">信息</span>
</p>

场景示例

与标题、按钮组合使用。

文档中心 12

<h3 class="pvs-h4 pvs-m-0">文档中心 <span class="pvs-badge pvs-badge--primary">12</span>
</h3>
<p class="pvs-mt-4 pvs-m-0">
  <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm">消息 <span class="pvs-badge pvs-badge--primary">3</span>
  </button>
</p>

Count badge

pvs-badge--count 数字角标；pvs-badge--dot 仅圆点提醒。

99+

<p class="pvs-m-0 pvs-cluster">
  <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm">收件箱 <span class="pvs-badge pvs-badge--danger pvs-badge--count">8</span>
  </button>
  <span class="pvs-badge pvs-badge--primary pvs-badge--count">99+</span>
  <span class="pvs-badge pvs-badge--danger pvs-badge--dot" aria-label="有新消息">
  </span>
</p>

类名速查

类名	说明
`pvs-badge`	默认灰底标签
`pvs-badge--primary`	主色浅底
`pvs-badge--success / --warning / --danger / --info`	语义浅底
`pvs-badge--muted`	弱化文字色
`pvs-badge--count`	数字角标（胶囊）
`pvs-badge--dot`	圆点提醒