梧桐设计语言v0.4.1

按钮Button

按钮的主色只给主操作,一屏只有一个主按钮;其余用次级(secondary 底)或幽灵(无底、hover 时 accent)。破坏性操作用 destructive 实心底 + on-status 字,绝不用主色。


  • 六档尺寸 size:xs 24 / sm 32 / md 36(桌面默认) / lg 40 / xl 48 / field 56(现场端)。每档绑定字号、图标、内距、圆角,见「布局 › 尺寸体系」;不要自己写高度。
  • 现场端用 field:通宽、固定在视口底部留安全区。
  • 文案是动词带数量:「删除 3 条」「派单」「确认并关单」;不写「确定」「提交」。
  • 图标在文字左侧,space-2 间距,与文字同色。
  • 禁用态:primarysecondary、字 subtle,不用透明度。
  • 按压 scale(.99) 100ms;键盘焦点 ring 2px 外距 2px。

消费者提供:文案、可选图标、变体(primary / secondary / ghost / destructive)、尺寸(xs / sm / md / lg / xl / field)、loading。

示例

import
import { Button } from "@wutong/ui";

四种变体

主色只给主操作,一屏一个;破坏性用 destructive

图标与禁用

六档尺寸

xs 24 · sm 32 · md 36 · lg 40 · xl 48 · field 56,每档绑定字号 / 图标 / 内距

现场端尺寸

高 56、通宽、固定在视口底部

API

属性类型默认说明
variant"primary" | "secondary" | "ghost" | "destructive""secondary"主色只给主操作;破坏性绝不用主色
size"xs" | "sm" | "md" | "lg" | "xl" | "field""md"24 / 32 / 36 / 40 / 48 / 56。图标与内距随档位变,不用自己配
iconReactNode图标在文字左侧,与文字同色
iconOnlyboolean纯图标按钮,必须配 aria-label
blockboolean通宽
loadingboolean忙碌态:图标位换成转圈并禁用,按钮不抖