# Button 按钮

按钮是一种命令组件，可发起一个即时操作。

# 设计说明

# 使用说明

# 主、次按钮展示

# 主、次按钮相对位置

面向复杂的工具系统，主、次按钮的相对位置应有灵活的规则。灵活的布局策略通常会考虑到：

# 正确和错误示范

# 分类说明

# 大小：规定了按钮尺寸与文字样式。

# 类型：规定了每种按钮的应用场景。

# 位置

# 按钮区

按钮区是用于放置按钮的区域，一个按钮区内可以有多个按钮。

# 跟随内容的按钮区

按钮区跟随受控内容。将按钮区放置于用户浏览路径中，便于被用户发现。

# 工具栏中的按钮区

工具栏中的按钮区，靠右放置。

# 如何确定按钮区的放置位置？

页面/卡片/一组信息都能够呈现一个主题，主题的描述可以抽象为三个区域：

Header： 标题和摘要信息的导航等；
Body： 具体内容；
Footer： 主题的补充信息和工具栏等。

也存在一些特殊情况，将“完成”主题类的动作放在 Header 区。例如，编辑器中为了最大化编辑空间，将“完成”类动作放到了右上角。

为避免页脚工具栏滥用，我们不推荐使用页脚工具栏，仅建议以下两种场景使用：

对象详情页，「推进」对象的进展，例如审批流程中的「通过」「驳回」；
异常复杂的表单页/弹框，其内容复杂到需要切分为多块区域。

# 按钮与表单、表格的组合示例

# 与表单组合：一行情况

查询条件较少的时候，可以不放重置按钮，且查询按钮跟随在查询条件后面；

如果查询条件刚好放满一行，那么查询和重置按钮自动换行，且在第二行的最右侧；

# 与表单组合：两行情况

重置和查询按钮放在最右侧显示；

更多查询-收起；

更多查询-展开：查询条件向下展开，且隐藏的条件顺延显示；

# 与表格组合：无标题情况

# 与表格组合：有标题情况

# 文案

文案需清楚传达用户按下按钮时系统将执行的操作。

推荐使用动词；
与语境紧密关联，用语简练。

组件中默认使用 “确定 / 取消”文案，但你仍然可以通过以下方式优化按钮文案：

描述任务结果；（发布、登录、注册等）
主要操作为否定含义时，强调后果。（你确定要删除它吗？删除 / 取消）

避免错别字

关键操作、文本信息，避免错别字。

不需要使用标点符号