# Button 按钮 ## 定义 / Definition 按钮是对用户的点击做出反应，并触发即时操作，每个按钮都有一个相对应的操作或流程。 ## 规则 / Rule 标准按钮分为主要和次要，一个页面中只能有一个主要按钮。 其他的操作皆为次要操作(同时包含禁用按钮与文字链接)。 其他按钮有：文字、图标、菜单按钮、悬浮等。 主要按钮跟次要按钮组合时，主要按钮需放在最右边或底部位置。 次要按钮并排时，不超过5个。 ## 样式与交互形式 / Style & Interaction ### 1. 常规按钮 / Button 按钮的视觉层级：primary＞secondary＞normal，warning在特殊需要警告的交互上使用警示按钮，如删除、注销等。 按钮通常由边框、底色、文字组成按钮，边框也可以与按钮底色相同，强调按钮的颜色一般来源于主品牌色，警示按钮来源于功能色中的警示色。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMLDjrxdF6J4z_Uu%2Fbutton1.png?generation=1523613277608231\&alt=media) 标准按钮与ICON组合样式 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMLISZCDxZz-m33H%2Fbutton2.png?generation=1523613276145923\&alt=media) ### 使用样例／Sample 消息卡片里的middle－size的 button ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMLMTop0hzBqOCHp%2Fbutton3.png?generation=1523613277986968\&alt=media) 和普通button共同使用的时候，强调类Button总是处于视线路径的最先引导位置。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMLP_xfyU4AUcLHX%2Fbutton4.png?generation=1523613281592536\&alt=media) ### 2. 固定按钮 / fixedButton button固定在某个特定区域，不随页面滑动而滑动。 常用于页面类较为强调的button，或不需要阅读完整个页面就可操作的button。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMLTpvBDcShOKnSF%2Fbutton5.png?generation=1523613279186507\&alt=media) 使用样例／Sample ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMLXOnQXJX_d8Moh%2Fbutton6.png?generation=1523613278042349\&alt=media) ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMLY9-HdxUfQSvgW%2Fbutton7.png?generation=1523613278097002\&alt=media) ## 弹出层 取消在左边，确认等下一步行为的位置在右边。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMLepJMnqJMn3jQJ%2Fbutton8.png?generation=1523613277479054\&alt=media) ## 文字按钮 文字按钮可以根据字色的不同分两个层级关系：强调、常规。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMLi6zylMjvqtLUu%2Fbutton9.png?generation=1523613276690034\&alt=media) ### 状态 文字按钮可以根据字色的不同分两个层级关系：强调、常规。 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMM2pxPuYWe7E-Pz%2Fbutton10.png?generation=1523613279092561\&alt=media) 使用样例／Sample ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMM6sEZ4kx4t1Znu%2Fbutton11.png?generation=1523613279172645\&alt=media) 注：点击按钮将执行一个相对应的操作或流程；如果是与本次流程无关并跳转另一个页面，使用链接。 ## 悬浮按钮 悬浮按钮通常在页面的右下脚，用于回到顶部等附加功能的快捷操作。 状态 ![](https://4166812807-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9yQCG59pKf7sUhpNI5%2F-L9yQG5SYkac0gOXDgkm%2F-L9yQMMFhRuAIIHvOCWq%2Fbutton12.png?generation=1523613278513145\&alt=media)