# 极简徽标（Status Badge）

- 类型 / 材质：`badge` / `minimal`（极简）
- 状态：done ｜ 最后提交：2026-11-01
- 灵感来源：Refactoring UI（发丝边 + 文字色做语义）
- 依据标准：`/design#interaction` ｜ 组件页：`/showcase/component/badge/minimal` ｜ 条目：`/r/badge--minimal.json`
- 必缺状态：（无必缺状态）
- 整页场景：尚未接入

## 规格

- 同一份 props（variant / dot）
- 实底 + 发丝边，没有模糊
- 语义只落在文字色；dot 的文字同样走 sr-only

## 参数（CSS 变量）

`--color-accent` `--color-divider` `--color-success-fg` `--color-surface` `--color-text-muted` `--color-warning-fg` `--text-2xs`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `children` | `ReactNode` | 必填 | — |
| `variant` | `'neutral' | 'accent' | 'success' | 'warning'` | 可选 | — |
| `dot` | `boolean` | 可选 | 只显示状态点：文字退成读屏可见 |
| `className` | `string` | 可选 | — |

## 提示词（可直接粘给智能体）

```
复现「极简徽标」— Status Badge（徽标 / Minimal）
灵感来源：Refactoring UI（发丝边 + 文字色做语义）
规格：
- 同一份 props（variant / dot）
- 实底 + 发丝边，没有模糊
- 语义只落在文字色；dot 的文字同样走 sr-only
参数（CSS 变量）：--color-accent --color-divider --color-success-fg --color-surface --color-text-muted --color-warning-fg --text-2xs
必缺状态：（无必缺状态）
整页场景：（尚未接进整页场景）
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/badge/minimal · 标准 interaction /design#interaction · 调研笔记 /showcase/component/badge/minimal#notes
```

## 调研笔记

import { type ReactNode } from 'react';

interface Props {
  children: ReactNode;
  variant?: 'neutral' | 'accent' | 'success' | 'warning';
  /** 只显示状态点：文字退成读屏可见 */
  dot?: boolean;
  className?: string;
}

const TONE = {
  neutral: 'text-[var(--color-text-muted)]',
  accent: 'text-[var(--color-accent)]',
  success: 'text-[var(--color-success-fg)]',
  warning: 'text-[var(--color-warning-fg)]',
};

export function MinimalBadge({ children, variant = 'neutral', dot = false, className = '' }: Props) {
  return (
    <span
      className={`
        inline-flex items-center gap-1.5
        px-2 py-0.5 rounded-full
        text-[length:var(--text-2xs)] font-mono
        bg-[var(--color-surface)] border border-[var(--color-divider)]
        ${TONE[variant]}
        ${className}
      `}
    >
      <span className="size-1.5 rounded-full bg-current" aria-hidden="true" />
      <span className={dot ? 'sr-only' : undefined}>{children}</span>
    </span>
  );
}