交互演示
该示例使您可以搭配不同配置选项来预览按钮组件，每个选项卡显示不同类型的按钮。
通用原则
-
在按钮中加图标时，图标必须能够帮助传达信息，不能只起到装饰作用
-
按钮文字与按钮图标的颜色在各种情况下都保持一致
-
每个页面通常只有一至两个首要按钮，给用户明确的操作指引
-
不同按钮类型具有不同的强调程度，警示按钮的强调程度高于图中所有类型按钮：
| 类型 | 等级 |
|---|---|
| 首要按钮、组合按钮 | ① |
| 次要按钮 | ② |
| 轻浅按钮、文字按钮、图标按钮 | ③ |
类型
| 类型 | 何时使用 |
|---|---|
| 首要按钮 | 1）用于强调的核心操作，等级程度①；2）可独立使用，也可与其他按钮搭配使用（除图标按钮）；3）同一个界面中通常不超过 2 个。 |
| 次要按钮 | 1）等级②次于首要按钮；2）可独立使用，也可以与其他按钮搭配使用（除图标按钮）。 |
| 轻浅按钮 | 1）等级③次于次要按钮；2）不可独立使用，需搭配首要按钮/次要按钮使用。 |
| 图标按钮 | 1）等级③，但视觉上占位空间少；2）可独立使用，也仅可与同类搭配使用。 |
| 文字按钮 | 1）等级③，视觉上更轻量；2）可独立使用，也可与同类/首要按钮/次要按钮搭配使用。 |
| 按钮组 | 多个按钮同时出现，且按钮间存在主次关系的时候使用。 |
| 警示按钮 | 用于类似「删除」等危险操作的时候。 |
首要按钮
可搭配图标使用，图标必须在文字左边。
次要按钮
可搭配图标使用，图标必须在文字左边。
轻浅按钮
可搭配图标使用，图标必须在文字左边。
图标按钮
仅一个图标表达，通常需搭配 Tooltip 来解释图标的含义。优先考虑使用 Primary Icon Button，仅在容器空间不足或 hover 样式重叠的情况下使用 Secondary Icon Button。
文字按钮
必须搭配图标使用，图标必须在文字左边。
按钮组
默认展示的是主要操作，点击右侧「箭头」唤起 Menu控件，展示所有其他操作。可搭配图标使用，图标必须在文字左边。
警示按钮
在其他类型按钮的基础上，指定为警示色，引起用户警惕。
构成
-
容器
-
图标：
-
必须在文字左侧
-
图标颜色和文字颜色保持一致。
-
必须表意，帮助用户理解操作的含义
-
-
文字：不可折行，不可省略，字数不超过 5 个字为佳
行为
-
所有按钮类型都有：Default、Hover、Active、Loading、Disable
-
若按钮所触发的操作不需要当前页面进行加载，则使用按钮本身的「加载指示器」来体现加载过程
布局
宽度适应容器
- 当容器宽度小于 320px 时，可将按钮宽度进行对应的拉伸调整
多按钮横向排列
-
边框按钮横向排列时，M 尺寸按钮之间间距为 16px，S 尺寸按钮之间间距为 12px，XS 尺寸按钮之间为 8px
-
当文案无法调整为相同字数，则可使用较大按钮的宽度，以保证按钮大小一致
-
在多个按钮同时使用时，相近功能的按钮在页面位置上更近
-
仅当多按钮位于容器左侧时，将重要操作靠左放置；其余情况请将重要操作靠右放置
多按钮纵向排列
-
当容器宽度较小时可考虑纵向排列
-
当文案无法调整为相同字数，则可使用较大按钮的宽度，以保证按钮大小一致
-
请将重要操作靠上放置
-
多个按钮同时出现时，首要按钮对齐容器边界，并以首要按钮为起点，往容器内按钮等级依次递减
- 多个按钮出现时候，必须遵守搭配组合逻辑，不可随意混合使用
- 按钮间间距
