Button 按钮
用于触发提交、确认或继续等明确且即时的用户操作。
使用概览
适合使用
- 需要让用户主动执行一个有清晰结果的操作时。
不建议使用
- 仅用于页面跳转时应优先使用具备链接语义的元素。
真实示例
主要操作按钮
以明确动词呈现表单保存动作。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/button.json基础用法
导入
import { Button } from "@richardqiu/quartz/button";JSX
<Button variant="primary">保存更改</Button>状态与控制摘要
默认
悬停
键盘焦点可见
激活
已禁用
加载中
variant · primary / secondary / outline / ghost / destructive / linksize · sm / md / lgdisabled · booleanloading · booleanchildren · textAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link" | "primary" | 设置按钮的视觉层级与操作语气。 |
loading | boolean | false | 显示进行中状态并阻止重复触发操作。 |
组合结构
- 01
Button
键盘约定
- Enter 或空格键激活按钮。
可访问性契约
- 通过可见文字、aria-label 或 aria-labelledby 提供可访问名称。
- 加载状态会阻止重复激活，并暴露 aria-busy。