按钮是一种命令组件，用于触发操作，点击后立即执行命令，用户能从按钮上清晰得预测出行为结果。

适用范围

何时使用：

• 触发一个执行操作的场景，如提交表单、开始新任务、在页面上触发一个新 UI 元素、步骤流转等；

何时不使用：

• 跳转到系统其他页面；
• 打开外部站点；
• 跳到同一页面的其他位置；
• 以上情况使用 Link 文字链接；

使用原则：

• 按钮代表的是一种行为动作，链接代表一种导览，具备导航属性；
• 在按钮中加图标时，图标必须能够帮助传达信息，不能只起到装饰作用；
• 按钮文字与按钮图标的颜色在各种情况下都保持一致；
• 一个按钮区内最多一个主要按钮，整个页面可能存在多个主要按钮；
• 不同按钮类型具有不同的强调程度，主要按钮的强调程度高于其他所有类型按钮；

类型

按钮组合

一些场景下，需要将相同主题类型的按钮组合进行使用，形成一个按钮区，一个按钮区内最多一个主要按钮，按钮之间也存在主次关系。

强调等级

不同按钮起到不同的强调等级，一般来讲，页面中应该明确一个强调的按钮，降低其余按钮的重要性使页面有个清晰的层次结构。高等级的按钮可搭配中、低等级的按钮，但一个按钮区内最多一个高等级的按钮。

构成解析

结构

• 容器Container
  • 文本：传达这个动作的预期效果，不可折行，字数尽量控制 6 个以内；
  • 图标：
    • 搭配文本时，图标为可选项；
    • 图标必须能够帮助传达信息，不能只起到装饰作用；
    • 图标颜色和文字颜色保持一致；

尺寸

按钮尺寸分为 3 种：小、中、大，默认尺寸为中尺寸。

小尺寸：

• 宽度：自适应内容；
• 高度：24px；

中尺寸：

• 宽度：自适应内容；
• 高度：32px；

大尺寸：

• 宽度：自适应内容；
• 高度：40px；

间距

用于表格的高亮文字按钮做特殊处理：

状态

所有按钮类型都有以下 5 种状态：Normal、Hover、Press、Loading、Disable

交互行为

触发

• 鼠标接触到容器任意位置触发按钮的 Hover 状态；
• 鼠标点击容器任意位置触发按钮的 Pressed 状态，松开鼠标后并执行命令；

加载

按钮所触发的操作不需要当前页面进行加载，则使用按钮本身的 Loading 状态来体现加载过程

布局

位置

按钮出现的位置主要有：Header、Content、Footer

• Header：如页面的页头、弹窗抽屉的头部，是信息区域的主题，能对 Content 区进行变更的动作；
• Content：具体的页面内容，此时按钮跟随内容，交互路径短，便于被用户发现；
• Footer：补充信息或者工具栏，一般放置具备“完结”“推进流程”的动作；

排序

根据阅读顺序排序：

• 从左到右阅读，重要性从左到右依次降低；
• 从右到左阅读，重要性从右到左依次降低；