button · minimal · 灵感来源：Refactoring UI（层次靠排版与留白，不靠材质）
Flat Minimal Button · 极简按钮 · 按钮 / Minimal
做一个 Flat Minimal Button（极简按钮）：
- 实底 + 一条发丝边线 + 一档软阴影，没有模糊与浮起
- 层次靠排版与留白，hover 只加一层 5% 墨色
- sm / md / lg 三档尺寸 + pill 变体 + disabled
- 与玻璃按钮同一份 props，按压统一缩放 0.97
用这些 CSS 变量：--color-divider --color-surface --color-text --color-text-muted --color-text-subtle --dur-fast --ease-standard --glass-border --glass-recess --shadow-sm --text-base --text-xs
灵感参考：Refactoring UI（层次靠排版与留白，不靠材质）--color-divider --color-surface --color-text --color-text-muted --color-text-subtle --dur-fast --ease-standard --glass-border --glass-recess --shadow-sm --text-base --text-xs
焦点 / 按压 / 禁用
（尚未接进整页场景）
/r/button--minimal.json
免外壳的 markdown 版：/llms/components/button--minimal.md--color-surface 实底 + 一条 --color-divider 发丝边 + --shadow-sm--glass-recess），不放大、不上浮；按压仍是全站统一的 0.97（.press-feedback）rounded-md，切换极简配方时会跟着配方收小（4px）对比玻璃按钮：同一位置少了 backdrop-blur 与 --glass-inset，所以它在任何背景上都一样清楚——这是极简轴要的确定性。
import { type ButtonHTMLAttributes, type ReactNode } from 'react';
import { Spinner } from '~/components/Feedback';
type Variant = 'default' | 'pill';
type Size = 'sm' | 'md' | 'lg';
interface MinimalButtonProps 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-md',
pill: 'rounded-full',
};
/**
* 极简按钮：与玻璃按钮同一份 props，只换视觉——
* 没有模糊、没有浮起、没有双阴影；层次靠一条发丝边线与一层 5% 墨色。
*/
export function MinimalButton({
children,
variant = 'default',
size = 'md',
loading = false,
className = '',
...rest
}: MinimalButtonProps) {
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(--color-surface)]
border border-[var(--color-divider)]
shadow-[var(--shadow-sm)]
press-feedback
transition-[background-color,border-color,color,opacity] duration-[var(--dur-fast)] ease-[var(--ease-standard)]
hover:bg-[var(--glass-recess)]
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>
);
}
src/components/button/minimal/