Badge 标签

标签、状态指示器、计数器

实时预览

引入

<link rel="stylesheet" href="/tokens/tokens.css">
<link rel="stylesheet" href="/components/badge/badge.css">

代码

HTML

<!-- Badge Component — 标签、状态指示器、计数器 -->


<!-- Demo: Badge 组件 -->
<div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">

  <!-- 基础颜色 -->
  <span class="badge badge--md badge--primary">设计系统</span>
  <span class="badge badge--md badge--secondary">前端</span>
  <span class="badge badge--md badge--success"><span class="badge__dot"></span> 在线</span>
  <span class="badge badge--md badge--warning">审核中</span>
  <span class="badge badge--md badge--danger">Bug</span>

  <!-- 空心 -->
  <span class="badge badge--md badge--primary badge--outline">React</span>
  <span class="badge badge--md badge--secondary badge--outline">Vue</span>

  <!-- 尺寸 -->
  <span class="badge badge--sm badge--primary">Small</span>
  <span class="badge badge--lg badge--success">Large</span>

  <!-- 角标示例 -->
  <div style="position:relative; display:inline-block; width:40px; height:40px; background:var(--color-bg-muted); border-radius:var(--radius-md);">
    <span class="badge--notification">3</span>
  </div>
</div>

CSS

/* Badge.css */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1;
}

/* ── Sizes ──────────────────────────── */
.badge--sm { padding: 2px 8px; font-size: 11px; }
.badge--md { padding: 4px 12px; font-size: var(--text-xs); }
.badge--lg { padding: 6px 16px; font-size: var(--text-sm); }

/* ── Colors ─────────────────────────── */
.badge--primary {
  color: var(--color-primary);
  background: var(--color-primary-ghost);
}
.badge--secondary {
  color: var(--color-secondary-dark);
  background: rgba(6, 182, 212, 0.1);
}
.badge--success {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
}
.badge--warning {
  color: #d97706;
  background: rgba(245, 158, 11, 0.1);
}
.badge--danger {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
}

/* ── 空心变体 ──────────────────────── */
.badge--outline {
  background: transparent;
  border: 1.5px solid currentColor;
}

/* ── 带圆点 ────────────────────────── */
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Notification badge (角标) ─────── */
.badge--notification {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: white;
  background: var(--color-danger);
  border: 2px solid var(--color-bg);
  border-radius: var(--radius-full);
}

AI 使用说明

组件名: badge
选择器: .badge
依赖: /tokens/tokens.css
文件: /components/badge/badge.html