按钮
按钮是用户界面中的一种交互式元素，当点击它时，它会执行一项操作，例如：表单提交、保存更改或移至下一步。如果您需要导航到其他页面或网站，请使用链接。
外观
有五种类型的按钮：重音、主键、语义、凸起和对比。
口音
重音按钮可突出显示关键操作并吸引用户注意重要操作。它们有三种主要风格：操作、概述操作和扁平操作
根据您要对界面中操作的强调程度，在这些类型的重音按钮之间进行选择。对最高优先级使用操作，将概述操作用于中等优先级，使用固定操作-用于较低优先级或次要操作。
在界面中谨慎使用重音按钮，如果可能，将其数量限制为每页一个（对话框除外）。这样，您可以强调重要性并突出显示用户的主要操作，但可以降低过多重音元素使界面不堪重负的风险。
小学
主按钮执行界面中的主要和常用操作。这些按钮有几种样式：正常、轮廓、扁平和扁平次要。根据您要对界面中某些操作的强调程度，在这些样式之间进行选择。例如，“普通” 按钮适用于标准操作，“概述” 按钮适用于中等优先级的操作，“平坦” 和 “平坦” 辅助按钮适用于不太重要的操作或辅助操作。
语义
语义按钮传达特定的上下文或操作，为用户带来意义。使用它们来帮助用户轻松了解所执行的操作及其含义。
语义按钮有四种主要样式：信息、成功、警告、危险。
信息
使用它们来执行与获取其他信息、提示或上下文相关的操作。当您需要突出显示导航到其他资源的选项时，信息按钮也可以用作超链接。例如：更多信息、文档、帮助。
成功
使用它们来突出显示成功完成的操作。
警告
使用它们来突出显示由于潜在风险或警告而需要用户注意的操作。这些按钮可帮助用户了解其行为可能产生的后果，并鼓励用户谨慎行事。
危险
使用它们来突出显示可能具有破坏性或产生负面后果的行为。我们建议谨慎使用此按钮，并且仅在确实需要突出显示潜在负面影响（例如删除、停止、断开连接）的情况下使用。
筹集了
凸起的按钮是一种突出在内容上方的按钮。使用它来突出显示屏幕上的重要操作，通常是固定位置。这种类型的按钮适用于用户应立即注意到的按键操作。
这些按钮还经常用于地图界面和基于图像的应用程序中，用于各种操作，例如缩放、平移或对图像数据进行其他操作。
对比色纽扣
对比按钮 是特殊类型的按钮，用于突出显示复杂背景上的操作。它们可以营造出明亮而清晰的对比度，即使在横幅或营销材料等多样且饱和的背景下也能提供出色的可见度。
这些按钮有助于突出显示操作并确保在不同背景（例如横幅中）上具有良好的可见度
解剖学
界面中按钮的结构包括各种设计选项：
1.仅限文本：仅包含文本的按钮。当文本清晰而毫不含糊地传达了按钮的用途时，尤其是当文本简短且内容丰富时，这样的按钮很有用。例如，您可以使用这样的按钮来执行诸如创建或取消之类的操作。 2.右边的图标：将图标放置在文本右侧的按钮。此选项可用于呈现执行相同操作的不同方式。例如，使用这样的按钮进行保存操作，用户有多个选项可供选择（另存为：PDF、RTF、HTML） 3.左边的图标：将图标放置在文本左侧的按钮。当图标带有重要信息且需要突出显示时，请使用此选项。例如，您可以使用这样的按钮进行启动或删除操作。 4.右侧和左侧的图标：带有图标的按钮位于文本的两侧。使用此选项用图标为按键操作加下划线，并为其执行提供不同的路径。例如，这样的按钮可用于添加操作，用户有多个选项可供选择（添加：项目、资源、文档）。 5.仅限图标：仅包含图标且不包含任何文本的按钮。当按钮上的信息可以直观地理解并且不需要额外的文本解释时，请使用此选项。您还可以使用它在有限的空间内紧凑地对多个操作进行分组，不给带有文本标签的按钮留出空间。例如，项目列表中的删除按钮。在这种情况下，您可以将删除选项作为不带文本标签的垃圾箱图标提供。
国家
界面中的每个按钮都有五种基本状态，这些状态直观地表明该按钮的可用性和用户当前的操作。
默认：按钮的主要状态，在此状态下，它已准备好进行交互并等待用户操作。
悬停：按钮已准备好进行交互并等待用户操作的状态。
禁用：按钮暂时无法进行交互的状态。为了获得更好的用户体验，我们建议您解释禁用该按钮的原因，尤其是在不直观的情况下。您可以将此解释作为按钮旁边的文本呈现，也可以作为悬停工具提示来呈现。
正在加载：表示系统运行操作以响应用户发起的操作的状态。
已选择：用于可切换元素的状态，用户可以在其中选择多个选项之一。处于 “选定” 状态的按钮表示当前选定的状态或选项。
尺码
每个按钮可以有四种尺寸，允许根据上下文选择最合适的选项。
XS 是用于在大小有限的组件中操作的额外尺寸。
S 用于标准按钮过大且占用大量空间的情况，例如桌子或小卡片。
M 是我们默认推荐的主要尺寸。
L 用于在创建表单、模态或弹出窗口中突出显示主要操作。
XL 用于需要突出显示操作且您的网站或登录页面上有足够空间的地方。
表格
使用 “pin” 属性，您可以控制按钮的形状，通过以下值设置其样式：
回合：圆形按钮，即两侧均为圆角。这种风格赋予按钮柔和而现代的外观，使其与之互动既友好又愉快。
砖头：两侧都有尖角的按钮。
清除：按钮边角锐利，两侧没有轮廓。
圈子：两侧均为圆形的纽扣。
您还可以将这些属性组合成不同的变体，根据设计概念和界面要求为按钮创建独特的样式。
宽度
默认按钮宽度会根据文本自动调整，允许按钮在宽度上拉伸以容纳所有文本，而不会被截断。但是，如果您需要控制按钮的宽度，则可以使用两个主要属性：auto 和 max。
自动：限制按钮尺寸，以避免超出容器限制。如果按钮内容不适合容器，则使用省略号将其隐藏，表示存在其他文本。
最大:将固定按钮宽度设置为等于父容器宽度。如果按钮内容超过此宽度，则还会用省略号截断，从而保持界面紧凑并防止容器溢出。
建议
用法
- 清晰简洁地表述按钮文本，以便用户立即了解点击后会发生什么。
- 使用图标时，请确保它们清楚地传达其含义，并且您的用户可以轻松识别它们。
- 保持图标和文本之间的平衡，使两个元素都可见且可读，并且都不占主导地位。
- 使用仅限图标的按钮时，在悬停时添加操作工具提示，以便用户可以看到该图标的含义。
写作文字
- 按钮上的文字应清晰简洁地传达点击后将发生的操作的本质。避免使用长短语或不明确的缩写。
- 使用描述用户操作的动词。例如，保存、发送、删除。
- 避免在按钮上使用负面词语或短语。负面指令可能会造成混乱。
- 对所有界面按钮上的文本保持一致的样式和格式。这可以帮助用户轻松浏览和了解可用的操作。