按钮是界面中最核心的操作触发元素。清晰的按钮分级和使用规范能帮助用户快速识别操作优先级，减少误操作。

按钮分级

Primary 主按钮

页面中最主要的操作按钮，引导用户完成核心任务。

  • 每个页面区域最多只出现一个主按钮
  • 使用品牌色填充，视觉权重最高
  • 用于确认、提交、创建、部署等核心操作
  • 不可用于取消或次要操作

Secondary 次按钮

辅助操作按钮，优先级低于主按钮。

  • 使用描边样式，无背景填充
  • 用于次要操作，如”取消”、“上一步”、“返回”
  • 可与主按钮成对出现

Tertiary 三级按钮

低优先级操作按钮，不希望吸引用户注意力。

  • 无边框无背景，仅有文字样式
  • 用于辅助操作，如”了解更多”、“展开详情”、“查看历史”
  • 悬停时显示背景色提示可点击

Danger 危险按钮

用于不可逆或高风险操作的按钮。

  • 使用红色填充或红色描边
  • 用于删除、重置、断开连接、清除数据等操作
  • 点击后应弹出二次确认
  • 不应与其他按钮分级混用（如不用红色主按钮表示强调）

Ghost 幽灵按钮

透明背景的按钮，通常用于深色背景或图片上方。

  • 背景透明，文字为白色或浅色
  • 悬停时显示半透明背景
  • 用于深色区域中的操作入口
  • 不用于常规浅色背景

视觉上表现为链接文字的按钮。

  • 无边框无背景，文字带下划线或品牌色
  • 用于内联操作，如”复制”、“编辑”、“删除”
  • 不用于页面级主要操作

按钮状态

Default 默认状态

按钮的静止状态。

  • 按照对应分级渲染默认样式
  • 确保与周围元素有足够对比度

Hover 悬停状态

鼠标移入按钮时的状态。

  • 背景色加深或提亮
  • 光标变为手型（pointer）
  • 状态变化应平滑过渡，过渡时间不超过 200ms

Active 激活状态

按钮被按下时的状态。

  • 背景色比悬停状态更深
  • 可配合轻微缩小（scale）效果
  • 触感反馈，让用户感知到点击已注册

Focus 聚焦状态

键盘导航时按钮获得焦点的状态。

  • 显示外圈聚焦光环（Focus Ring）
  • 光环颜色使用品牌色或系统聚焦色
  • 光环与按钮间距 2-3px
  • 确保键盘可访问性

Disabled 禁用状态

按钮不可点击时的状态。

  • 降低透明度（通常 40%-50%）
  • 移除悬停和激活效果
  • 光标变为默认箭头
  • 如有空间，可通过 Tooltip 说明禁用原因

Loading 加载状态

按钮对应操作正在执行中的状态。

  • 替换按钮文字为加载动画（Spinner）
  • 按钮不可重复点击
  • 保持按钮宽度不变，避免布局跳动
  • 加载完成后自动恢复正常状态

设计原则

一个区域一个主操作

每个页面或区域最多只应有一个 Primary 主按钮。

  • 主按钮引导用户完成最重要的操作
  • 如果存在多个同等重要的操作，说明交互设计需要重新考虑
  • 次要操作使用 Secondary 或 Tertiary 按钮

危险操作必须可区分

涉及删除、重置、覆盖等不可逆操作必须使用 Danger 按钮。

  • 危险操作不应使用主按钮样式
  • 必须配合二次确认
  • 确认弹窗中按钮文案应明确说明操作后果

文案使用动词短语

按钮文案必须以动词开头，明确表达点击后的操作。

  • 推荐文案：“创建设备”、“保存配置”、“部署项目”、“删除资源”、“复制命令”、“下载固件”
  • 禁止文案：“好的”、“提交一下”、“确定”、“操作”、“完成”
  • 文案长度控制在 2-6 个中文字符
  • 文案不可模糊或含糊其辞

按钮尺寸统一

按钮尺寸应参数化且统一。

  • 大按钮（Large）：用于页面级主要操作，高度 44px
  • 默认按钮（Default）：常规操作，高度 36px
  • 小按钮（Small）：表格内或空间受限场景，高度 28px
  • 按钮内边距左右 16px，上下居中
  • 图标按钮保持相同高度，宽度可为正方形