用途:按钮是交互元素,用于在点击或交互时触发操作或事件。适用于触发即时操作(如“保存”“删除”“发送”)、提交表单、打开或关闭模态框/对话框/菜单、在状态间切换(如播放/暂停、显示/隐藏)、下载文件或内容,以及在多步骤流程中导航步骤。
应避免的场景:页面间导航(应使用链接)、操作对用户不明确、纯文本内容不触发操作、更适合用复选框或开关等组件、多个冲突操作被放在一起、操作需要额外上下文而当前不可得。
实现流程:先确认该模式与问题和约束匹配,再复制示例;从 references/pattern.md 中的结构与示例入手,选择最小可行变体;在叠加视觉细节前先应用无障碍、性能和交互护栏;使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍护栏:仅图标按钮使用 aria-label;切换按钮使用 aria-pressed;控制可展开内容的按钮使用 aria-expanded;用 aria-disabled="true" 代替 disabled 属性;用 aria-describedby 关联补充说明文本。示例包括带 aria-label 的仅图标按钮、带 aria-pressed 的切换按钮、带 aria-expanded 与 aria-controls 的展开按钮。
相关模式:切换(https://uxpatterns.dev/patterns/forms/toggle)、链接(https://uxpatterns.dev/patterns/navigation/link)。完整实现细节、示例与测试说明见 references/pattern.md,模式页面为 https://uxpatterns.dev/patterns/forms/button。