按钮

按钮是用于单步操作的交互式元素。

• 悬停状态： 当鼠标光标悬停在按钮上时，应清楚地显示按钮是交互式的。
• 激活状态： 用于按钮被按下时。相同的状态可以用来表示负责在页面中切换另一个元素的按钮，而该元素在可见打开时。
• 聚焦状态： 用于通过键盘导航选中按钮时。
• 图标支持： 图标在按钮标签旁边使用时可以轻松传达按钮的用途，或者在空间不足时无需文本使用。确保在使用图标时提供可访问性标签。
• 禁用： 视觉上显示按钮不是交互式的，并限制其被按下。
• 加载： 用于用户在按下按钮后必须等待其操作结果的场景。如果使用旋转器显示此状态，请确保它不会改变原始按钮的宽度或高度。
• 全宽： 默认情况下，按钮采用其内容的宽度，但它们也应该带有全宽变体，该变体在移动设备中效果良好。
• 变体： 当使用多个按钮时，应该有一种方法来区分主要和次要操作。按钮可能对用户扮演不同的角色，或用于不同类型的表面，并且它们必须改变它们的外观。
• 尺寸： 按钮可以用于网站的多个区域，并且可能有多个预定义的尺寸。在移动设备上，可点击区域必须至少为 48px，才能根据 iOS 和 Android 可访问性指南获得可访问性。
• 响应式： 在移动视口上，卡片通常是全宽的，以节省内容空间。