Button
用于保存、打开对话框或改变状态等操作。跳转到其他页面时使用链接。
预览
样式与尺寸
比较 primary、soft、ghost、destructive，以及小号、大号、图标和禁用按钮。
安装
首次使用此 Registry？请先完成 基础配置与共享样式安装 。
npx shadcn@latest add @neumorphism-ui/button先安装一次共享 base，然后使用 CLI 添加组件及其依赖。
用法
先提供明确的文字，再通过 variant 选择强调程度、size 选择尺寸。表单内明确指定 type，仅有图标的按钮也需提供可访问名称。
"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
export default function Example() {
const [saved, setSaved] = useState(false);
return (
<div>
<Button variant="primary" onClick={() => setSaved(true)}>Save changes</Button>
<p role="status">{saved ? "Changes saved." : "Unsaved changes."}</p>
</div>
);
}API 参考
使用原生 button，保留表单与键盘行为。提供五种 variant 和四种 size，active 状态通过 inset shadow 表现按下效果。
| 组件 | 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
Button | variant | "default" | "primary" | "soft" | "ghost" | "destructive" | "default" | 选择按钮的语义和表面强调方式。 |
Button | size | "sm" | "default" | "lg" | "icon" | "default" | 选择按钮高度和水平内边距。 |
Button | type | "button" | "submit" | "reset" | "button" | 决定原生按钮的行为。 |
Button | disabled | boolean | false | 禁用点击和键盘操作。 |
无障碍
- 01
由于使用原生 button，会保留 Space、Enter 键行为以及 disabled 语义。
- 02
icon 尺寸的按钮必须提供描述操作的 aria-label。
- 03
页面跳转应使用语义正确的 anchor 或 Link，不要用 Button 的点击处理器代替。