按钮

按钮是向用户表达“这里可以执行操作”的主要视觉元素。

设计原则

操作明确：按钮应清楚表达它会触发一项操作。

反馈清晰：悬停、按下、获得焦点等交互状态，必须在外观上有明确区别，让用户立即获得反馈。

风格一致：所有按钮应共享一致的核心视觉语言，让用户一眼就能认出。

灵活适配：按钮组件应支持图标、不同尺寸等常见变化，同时保持一致性。

使用与布局

按钮应靠近与它相关的内容。它既可以独立放置，也可以与卡片、列表等组件组合使用。

图标按钮

图标按钮可以降低内容密度。只有当图标能清楚表达操作含义时，才适合单独使用；否则，应加上文字标签。

切换按钮

对于收藏等只有两种状态的操作，每一种按钮类型都提供可切换的变体。切换状态时相应更换图标，可以让变化更容易被一眼察觉，反馈也更明确。

组件构成

普通按钮由文字标签组成，也可以在文字前方或后方添加图标。

图标按钮只包含一个容易辨认的图标。普通按钮和图标按钮都提供可切换状态的变体。

默认按钮

1. 默认状态；2. 获得焦点；3. 按下；4. 禁用；5. 禁用且获得焦点。

大尺寸按钮

1. 默认状态；2. 获得焦点；3. 按下；4. 禁用；5. 禁用且获得焦点。

图标按钮

1. 默认状态；2. 获得焦点；3. 按下；4. 禁用；5. 禁用且获得焦点。

图标按钮

1. 默认状态；2. 获得焦点；3. 按下；4. 禁用；5. 禁用且获得焦点。

自定义

按钮提供默认尺寸和大尺寸两种样式。大尺寸有助于强调操作的重要性。

在文字前方或后方添加图标，可以进一步突出操作、解释含义，并提高辨识度。