---
title: 徽章与档位 Badge
url: https://ui.zhaozimin.com/components/badge/
markdown: https://ui.zhaozimin.com/components/badge.md
group: 组件
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
  - src/system/screens/v4/course/TierPill.jsx  # https://ui.zhaozimin.com/src/system/screens/v4/course/TierPill.jsx
  - src/system/lib/courseTiers.js  # https://ui.zhaozimin.com/src/system/lib/courseTiers.js
  - src/extracted/Tag.jsx  # https://ui.zhaozimin.com/src/extracted/Tag.jsx
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
tokens: [--zzm-tier-free, --zzm-tier-member, --zzm-tier-ext]
---

# 徽章与档位 Badge

> 一切不可点的标识。圆＝徽章不可点，方角＝控件可点——这条信号让用户看形状就知道能不能点。

## 课时档位

免费绿 / 会员黄 / 拓展红——黑白系统里唯一被允许的功能信号色，配色全部走 `--zzm-tier-*` 令牌。`level` 就是课节的 `required_level`：0、1 归免费，2 会员，3 拓展。

### 样张 · TierPill

React：

```jsx
import { TierPill } from './screens/v4/course/TierPill.jsx'

export function Tiers() {
  return (
    <>
      <TierPill level={0} />
      <TierPill level={2} />
      <TierPill level={3} />
    </>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<span
  style="
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--zzm-tier-free-bg);
    color: var(--zzm-tier-free-ink);
  "
>
  免费
</span>
<span
  style="
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--zzm-tier-member-bg);
    color: var(--zzm-tier-member-ink);
  "
>
  会员
</span>
<span
  style="
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--zzm-tier-ext-bg);
    color: var(--zzm-tier-ext-ink);
  "
>
  拓展
</span>
```

### 样张 · 反光扫过

shine：一道反光时不时扫过；delay 逐个错开，避免同屏齐刷

React：

```jsx
import { TierPill } from './screens/v4/course/TierPill.jsx'

export function TiersShine() {
  return (
    <>
      <TierPill level={0} shine delay={0} />
      <TierPill level={2} shine delay={0.7} />
      <TierPill level={3} shine delay={1.4} />
    </>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<span
  class="zzm-pill-shine"
  style="
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--zzm-tier-free-bg);
    color: var(--zzm-tier-free-ink);
    --zzm-shine-delay: 0s;
  "
>
  免费
</span>
<span
  class="zzm-pill-shine"
  style="
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--zzm-tier-member-bg);
    color: var(--zzm-tier-member-ink);
    --zzm-shine-delay: 0.7s;
  "
>
  会员
</span>
<span
  class="zzm-pill-shine"
  style="
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--zzm-tier-ext-bg);
    color: var(--zzm-tier-ext-ink);
    --zzm-shine-delay: 1.4s;
  "
>
  拓展
</span>
```

| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `level` | 0 · 1 · 2 · 3 | 0 | 课节档位（required_level） |
| `shine` | boolean | false | 挂反光（.zzm-pill-shine） |
| `delay` | number（秒） | 0 | 反光错峰延时，经 --zzm-shine-delay 传入 |
| `style` | object | — | 只放 margin 等布局 |

## 小标签与圆徽

### 样张 · Tag · RoundBadge

9.5px · 600 · 字距 1px · 圆角 4

React：

```jsx
import { Tag, StatusPill, RoundBadge } from './extracted/Tag.jsx'

export function Tags() {
  return (
    <>
      <Tag tone="accent">试看</Tag>
      <Tag tone="neutral">会员</Tag>
      <RoundBadge>◆</RoundBadge>
    </>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<span
  style="
    display: inline-block;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(166, 64, 47, 0.08);
    color: var(--zzm-accent, #a6402f);
  "
>
  试看
</span>
<span
  style="
    display: inline-block;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #efefec;
    color: #8b8b85;
  "
>
  会员
</span>
<span
  style="
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1d1d1b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
  "
>
  ◆
</span>
```

## 状态胶囊

### 样张 · StatusPill

通过 / 中性 / 拦截

React：

```jsx
import { Tag, StatusPill, RoundBadge } from './extracted/Tag.jsx'

export function Pills() {
  return (
    <>
      <StatusPill tone="ok">验证通过 · 可发送</StatusPill>
      <StatusPill tone="neutral">冷却中 · 60s</StatusPill>
      <StatusPill tone="danger">请求过多 · 暂时拦截</StatusPill>
    </>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<span
  style="
    display: inline-block;
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(79, 169, 106, 0.1);
    color: #3b8557;
  "
>
  验证通过 · 可发送
</span>
<span
  style="
    display: inline-block;
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #efefec;
    color: #8b8b85;
  "
>
  冷却中 · 60s
</span>
<span
  style="
    display: inline-block;
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(166, 64, 47, 0.07);
    color: var(--zzm-accent, #a6402f);
  "
>
  请求过多 · 暂时拦截
</span>
```

## 铁律

- ✓ 要：徽章、标签、状态不可点
- ✗ 不要：给徽章加点击事件——要能点就改成按钮
- ✓ 要：档位色只出现在档位胶囊上
- ✗ 不要：用档位绿、黄去表达别的意思

## 本页用到的 CSS

按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：

```css
/* tokens.css · 用到的令牌 */
:root {
  --zzm-tier-free-bg: rgba(22, 163, 74, 0.12);
  --zzm-tier-free-ink: #157F3C;
  --zzm-tier-member-bg: rgba(224, 146, 10, 0.18);
  --zzm-tier-member-ink: #8A5606;
  --zzm-tier-ext-bg: rgba(166, 64, 47, 0.11);
  --zzm-tier-ext-ink: #A6402F;
  --zzm-accent: #A6402F;
}

/* controls.css */

.zzm-v4 .zzm-pill-shine {
  position: relative;
  overflow: hidden;
}

.zzm-v4 .zzm-pill-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateX(-180%);
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .85) 50%, transparent 66%);
  animation: zzmPillShine 4.6s ease-in-out infinite;
  animation-delay: var(--zzm-shine-delay, 0s);
}

/* keyframes */
@keyframes zzmPillShine { 0% { transform: translateX(-180%) } 14% { transform: translateX(180%) } 100% { transform: translateX(180%) } }
```

---

上一页：[复选框](https://ui.zhaozimin.com/components/checkbox.md) · 下一页：[面包屑](https://ui.zhaozimin.com/components/breadcrumb.md) · 全站目录：https://ui.zhaozimin.com/llms.txt