按钮 Button

触发一个操作：提交表单、打开对话框、跳转到下一步。跳转到其他页面时使用 <a> 标签套用同样的类名。

变体

examples/button/variants.html

变体	用途	类名
主要 primary	页面或区块内最重要的一个操作（提交、下一步、联系我们）	`bg-navy text-navy-foreground hover:bg-navy-muted`
次要 secondary	与主要操作并列的次级操作	`bg-secondary text-secondary-foreground hover:bg-secondary/70`
描边 outline	返回、取消、卡片内的「立即申请」	`border border-navy/30 bg-background text-navy hover:bg-accent`
幽灵 ghost	工具栏、图标按钮等低强调操作	`text-foreground hover:bg-muted`
危险（弱）	列表中的删除、移除	`bg-destructive/10 text-destructive hover:bg-destructive/15`
危险 destructive	对话框中不可撤销操作的最终确认	`bg-destructive text-destructive-foreground hover:bg-destructive/90`
链接 link	行内文字操作	`h-auto px-0 text-sm text-brand underline-offset-4 hover:underline`

所有按钮共用的基础类名（字号随尺寸给出，见下一节）：

html

inline-flex shrink-0 items-center justify-center gap-2 rounded-lg font-medium whitespace-nowrap transition-colors select-none
focus-visible:ring-3 focus-visible:ring-ring/40 focus-visible:outline-none
disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*=size-])]:size-4

尺寸

examples/button/sizes.html

尺寸	类名	用在哪里
sm · 36px	`h-9 px-3 text-sm`	页头「联系我们」、表格行内、紧凑工具栏
md · 44px（默认）	`h-11 px-5 text-sm`	表单、对话框、卡片。与输入框同高，可以并排
lg · 48px	`h-12 px-6 text-base`	首屏和深蓝区块的主行动按钮
图标按钮	`size-9` / `size-11`	与对应尺寸的按钮等高

为什么默认是 44px

44px 是移动端推荐的最小点击尺寸，也和输入框（h-11）同高，表单里「输入框 + 发送验证码按钮」可以直接并排。

图标

examples/button/icons.html

图标默认 16px（size-4），放在文字前表示动作（添加、下载），放在文字后表示去向（外链、下一步）
只有图标的按钮必须加 aria-label

状态

examples/button/states.html

禁用：使用原生 disabled 属性，不要只改样式
加载中：同时加 disabled 与 aria-busy="true"，图标换为 loader-circle 并加 animate-spin，文案改为进行时（「提交中…」）

深色背景

在 bg-navy 区块（首屏、联系我们）上使用下面两种按钮，焦点环改用天蓝色 focus-visible:ring-sky/60。

examples/button/on-dark.html

使用建议

无障碍

按钮用 <button type="button">，表单提交用 type="submit"；页面跳转用 <a href>
焦点环由 focus-visible 提供，只在键盘操作时出现，不要移除
图标都要加 aria-hidden="true"（pnpm icons 生成的图标已自带）

与 v2 的差异

v2 现状	规范
`Button` 默认高度 32px（`h-8`），实际使用时再用 `h-9` / `h-10` / `h-11` / `h-12` 覆盖	统一为 sm 36px / md 44px / lg 48px 三档
默认变体 `bg-primary` 悬停不变色，业务里每次手写 `bg-navy hover:bg-navy-muted` 覆盖	主要按钮自带悬停色
危险按钮只有弱样式	增加实心危险按钮，用于最终确认
焦点环 `ring-ring/50`，深色背景上几乎看不见	浅底 `ring-ring/40`，深底 `ring-sky/60`

按钮 Button ​

变体 ​

尺寸 ​

图标 ​

状态 ​

深色背景 ​

使用建议 ​

无障碍 ​

与 v2 的差异 ​

按钮 Button

变体

尺寸

图标

状态

深色背景

使用建议

无障碍

与 v2 的差异