用途:为界面中的按钮建立一致的设计规范,覆盖层级、尺寸、标签、状态与图标按钮等要点。
主要能力: 按钮层级分三级。Primary 每屏一个,代表主操作,使用填充与品牌色;Secondary 为辅助操作,使用描边或弱化填充;Tertiary 最不重要,使用纯文本或幽灵按钮。
尺寸:Small 高 32px,用于行内操作、表格行、标签;Medium 高 40px,为多数场景默认;Large 高 48px,用于首屏 CTA、主操作与移动端。
标签:使用动词,如 Save、Delete、Create Project,而非 OK、Submit、Yes;要具体,如 Add to Cart 而非 Continue;控制在 2-4 个词,过长说明操作对按钮而言过于复杂;除品牌体系要求外不使用全大写。
状态:每个按钮需覆盖 Default、Hover、Active/Pressed、Focus、Disabled、Loading。加载状态用 spinner 加“Saving...”替换标签,保持按钮宽度稳定,加载期间禁用按钮,且不能丢失用户点击。
图标按钮:始终提供 tooltip 或 aria-label;即使图标为 20px,触控目标最小也应为 44x44px;常见图标包括关闭(X)、菜单(汉堡)、更多(三点)、返回(箭头)。
使用方式与限制:资料未提供具体安装命令、代码示例或平台接入方式,暂未提供。该技能以设计规范形式呈现,适用于需要统一按钮样式与交互的界面设计场景。