按钮Button
按钮的主色只给主操作,一屏只有一个主按钮;其余用次级(secondary 底)或幽灵(无底、hover 时 accent)。破坏性操作用 destructive 实心底 + on-status 字,绝不用主色。
- 六档尺寸
size:xs 24 / sm 32 / md 36(桌面默认) / lg 40 / xl 48 / field 56(现场端)。每档绑定字号、图标、内距、圆角,见「布局 › 尺寸体系」;不要自己写高度。
- 现场端用
field:通宽、固定在视口底部留安全区。
- 文案是动词带数量:「删除 3 条」「派单」「确认并关单」;不写「确定」「提交」。
- 图标在文字左侧,
space-2 间距,与文字同色。
- 禁用态:
primary 换 secondary、字 subtle,不用透明度。
- 按压
scale(.99) 100ms;键盘焦点 ring 2px 外距 2px。
消费者提供:文案、可选图标、变体(primary / secondary / ghost / destructive)、尺寸(xs / sm / md / lg / xl / field)、loading。
示例
import { Button } from "@wutong/ui";
四种变体
主色只给主操作,一屏一个;破坏性用 destructive
六档尺寸
xs 24 · sm 32 · md 36 · lg 40 · xl 48 · field 56,每档绑定字号 / 图标 / 内距
API
| 属性 | 类型 | 默认 | 说明 |
|---|
| variant | "primary" | "secondary" | "ghost" | "destructive" | "secondary" | 主色只给主操作;破坏性绝不用主色 |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "field" | "md" | 24 / 32 / 36 / 40 / 48 / 56。图标与内距随档位变,不用自己配 |
| icon | ReactNode | — | 图标在文字左侧,与文字同色 |
| iconOnly | boolean | — | 纯图标按钮,必须配 aria-label |
| block | boolean | — | 通宽 |
| loading | boolean | — | 忙碌态:图标位换成转圈并禁用,按钮不抖 |