按钮 Button

允许用户触发即时操作。

使用场景

• 使用按钮执行特定操作，指导用户采取行动。
• 激活或停用对象或元素

类型

普通按钮

最基础的按钮样式。

图标按钮

可以在文字旁边放置图标，以阐明操作并引起对按钮的注意。按钮中使用的图标请确保能明确表达文字含义。

纯图标按钮

图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面。

使用建议

• 使用纯图标按钮必须有 Tooltip 提示按钮含义。
• 需要在较小的空间内展示尽量多的按钮。

特殊类型

危险按钮

此按钮用户通过视觉样式提示用户该操作具有危险性。

幽灵按钮

幽灵按钮将按钮的内容反色，背景色变为透明，常用在有色背景上。

虚框按钮

用于引导用户在一个区域中添加内容。

使用建议

从哪个方向增加数据，则虚框按钮出现在哪个方向。

状态

失效

按钮失效状态。

加载

按钮加载状态。

设计指引

删除操作

信息重要等级较低

对于删除一些重要等级较低的内容，为避免误操作，执行删除操作时使用气泡卡片做二次确认。

信息重要等级较高

对于删除一些重要等级较高的内容，为避免误操作，执行删除操作时使用弹窗做二次确认。

危险按钮

实际产品中容易对危险按钮进行误用，此处需要按照危险程度进行定义：

操作不会对系统产生影响

对于操作不会对系统产生影响的操作，通过鼠标 hover 展示危险色的传达给用户以警示，但也还需要二次确认告知用户有可能引起的后果。

操作会对系统产生影响

需要在用户触发操作前通过视觉呈现给与用户警告。

参考文档

https://experience.sap.com/fiori-design-web/button/

https://www.lightningdesignsystem.com/components/buttons/

https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/

https://material.io/components/buttons

https://designsystem.morningstar.com/components/button/?version=3.0.7&tab=variations

https://atlassian.design/guidelines/product/components/buttons