# 拟态按钮（Neumorphic Button）

- 类型 / 材质：`button` / `neumorphic`（新拟态）
- 状态：done ｜ 最后提交：2026-10-31
- 灵感来源：Neumorphism（同色双阴影：亮侧高光 + 暗侧投影）
- 依据标准：`/design#material` ｜ 组件页：`/showcase/component/button/neumorphic` ｜ 条目：`/r/button--neumorphic.json`
- 必缺状态：焦点 / 按压 / 禁用
- 整页场景：尚未接入

## 规格

- 控件与页面同色，只靠亮侧高光 + 暗侧投影浮出表面
- 没有边框、没有模糊，凹陷与浮起是同一组阴影的两种朝向
- sm / md / lg 三档尺寸 + pill 变体 + disabled
- 与玻璃按钮同一份 props，暗色跟随 --neuro-bg 自动换色

## 参数（CSS 变量）

`--color-text` `--color-text-muted` `--color-text-subtle` `--dur-fast` `--ease-standard` `--glass-border` `--glass-recess` `--neuro-bg` `--neuro-dark` `--neuro-light` `--neuro-shadow` `--text-base` `--text-xs`

## Props 契约

继承原生属性接口：`ButtonHTMLAttributes<HTMLButtonElement>`（原生属性都接受，自有字段如下）

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `children` | `ReactNode` | 必填 | — |
| `variant` | `Variant` | 可选 | — |
| `size` | `Size` | 可选 | — |
| `loading` | `boolean` | 可选 | 加载中：转圈 + 禁用 + aria-busy（宽度不变，内容变淡） |

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

```
复现「拟态按钮」— Neumorphic Button（按钮 / Neumorphic）
灵感来源：Neumorphism（同色双阴影：亮侧高光 + 暗侧投影）
规格：
- 控件与页面同色，只靠亮侧高光 + 暗侧投影浮出表面
- 没有边框、没有模糊，凹陷与浮起是同一组阴影的两种朝向
- sm / md / lg 三档尺寸 + pill 变体 + disabled
- 与玻璃按钮同一份 props，暗色跟随 --neuro-bg 自动换色
参数（CSS 变量）：--color-text --color-text-muted --color-text-subtle --dur-fast --ease-standard --glass-border --glass-recess --neuro-bg --neuro-dark --neuro-light --neuro-shadow --text-base --text-xs
必缺状态：焦点 / 按压 / 禁用
整页场景：（尚未接进整页场景）
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/button/neumorphic · 标准 material /design#material · 调研笔记 /showcase/component/button/neumorphic#notes
```

## 调研笔记

import { type ButtonHTMLAttributes, type ReactNode } from 'react';
import { Spinner } from '@/components/ui-echo/Feedback';

type Variant = 'default' | 'pill';
type Size = 'sm' | 'md' | 'lg';

interface NeumorphicButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  variant?: Variant;
  size?: Size;
  /** 加载中：转圈 + 禁用 + aria-busy（宽度不变，内容变淡） */
  loading?: boolean;
}

const sizeClasses: Record<Size, string> = {
  sm: 'px-4 py-1.5 text-sm',
  md: 'px-6 py-2.5 text-base',
  lg: 'px-8 py-3.5 text-lg',
};

const variantClasses: Record<Variant, string> = {
  default: 'rounded-xl',
  pill: 'rounded-full',
};

/**
 * 拟态按钮：同色浮起，没有边框也没有模糊。
 * 亮侧高光 + 暗侧投影成对出现（--neuro-shadow），按下时翻成 inset——
 * 这是新拟态唯一"物理"的地方：表面被压进去，而不是缩小。
 */
export function NeumorphicButton({
  children,
  variant = 'default',
  size = 'md',
  loading = false,
  className = '',
  ...rest
}: NeumorphicButtonProps) {
  const spinnerSize = size === 'lg' ? 16 : size === 'md' ? 14 : 12;
  return (
    <button
      {...rest}
      aria-busy={loading || undefined}
      disabled={loading || rest.disabled}
      className={`
        relative inline-flex items-center justify-center
        ${sizeClasses[size]}
        ${variantClasses[variant]}
        font-medium
        text-[var(--color-text)]
        bg-[var(--neuro-bg)]
        shadow-[var(--neuro-shadow)]
        press-feedback
        transition-[box-shadow,transform,opacity] duration-[var(--dur-fast)] ease-[var(--ease-standard)]
        active:shadow-[inset_3px_3px_8px_var(--neuro-dark),inset_-3px_-3px_8px_var(--neuro-light)]
        disabled:opacity-40 disabled:cursor-not-allowed
        cursor-pointer
        ${className}
      `}
    >
      {loading && <Spinner size={spinnerSize} className="mr-2 align-[-0.125em]" label="加载中" />}
      <span className={loading ? 'opacity-60' : ''}>{children}</span>
    </button>
  );
}