按钮
按钮是唯一负责交互反馈的基础控件。它用 1px 描边而非阴影表达层级，用 scale(0.96)表达按下，从不位移。所有变体共用同一套尺寸阶梯：32 / 36 / 40 / 44px。
变体
一屏之内最多出现一个 default（品牌填充）按钮，它标记当前视图的主操作。
尺寸
尺寸同时改变高度、内距与字号，图标尺寸自动跟随。
状态
悬停只改背景与描边；焦点环是全局 2px 品牌色外描边，偏移 2px；禁用态把不透明度压到 50% 并移除指针事件。
用法
---
import Button from '@/components/ui/Button.astro'
---
<Button>主操作</Button>
<Button variant="outline" size="sm">次要</Button>
<Button variant="destructive" disabled>删除</Button>类名与 token
| 类名 | 作用 |
|---|---|
.zz-btn | 基础结构：内联弹性、等宽字体、1px 透明边框占位、150ms 过渡 |
.zz-btn--default | 品牌色填充，文字用 --zz-brand-ink |
.zz-btn--outline | 1px --zz-border-strong 描边 + --zz-surface 底 |
.zz-btn--secondary | --zz-surface-2 底，用于次级操作 |
.zz-btn--ghost | 无底，仅悬停出 --zz-surface-2，图标按钮默认 |
.zz-btn--destructive | 12% 危险色底 + 危险色文字 |
.zz-btn--link | 无内距，品牌色文字，悬停下划线 |
.zz-btn--xs | sm | md | lg | 高度 2 / 2.25 / 2.5 / 2.75rem，内距 10 / 12 / 16 / 20px |
.zz-btn--icon | icon-xs | icon-sm | icon-lg | 正方形，内距归零 |
.zz-btn-group | 横向拼接，相邻按钮重叠 1px 边框 |
可访问性
- 图标按钮必须带
aria-label（<slot>里只有 svg 时）。 - 焦点环由全局
:focus-visible提供，不要用outline: none覆盖。 - 渲染成
<a>时用aria-disabled而不是disabled，并保留可聚焦性。 - 按下反馈是纯视觉变换，不改变布局，因此不会引起重排抖动。