Button types 按钮类型
/BUT-n TYPES/ · noun · 操作类模式 · #138
按钮是按下去就执行某个操作的控件，比如发送、保存、购买；链接则是把你带到别处。界面按显眼程度给按钮分级：实心填充的主按钮用于最主要的操作（一屏通常只有一个），带边框或浅色底的次按钮用于备选操作，没有边框的文字按钮用于“取消”这类次要操作。只显示一个图标的叫图标按钮，比如爱心或垃圾桶。
别名：图标按钮、文字按钮。
你可能会这样叫它
- “页面上最显眼的那个按钮”
- “主按钮和次按钮”
- “只有图标的按钮”
- “看起来像链接的按钮”
……它的名字是 按钮类型（Button types）。
常见问题
按钮的类型有哪些？
在界面设计里，按显眼程度分：实心填充的主按钮（最主要的操作）、带边框或浅色底的次按钮（备选操作）、没有边框的文字按钮（次要操作，也叫第三级按钮）。按形态和用途分还有：只有图标的图标按钮、悬浮在内容上的悬浮操作按钮（FAB）、带下拉箭头的分割按钮，以及按下后保持状态的切换按钮。
主按钮和次按钮的区别？
主按钮是你最希望用户点的那个操作，比如“提交”“购买”，用品牌色实心填充，最显眼；次按钮是备选操作，比如“返回”“存草稿”，用边框或浅色底，看起来更低调，不和主按钮抢注意力。一个页面或对话框里通常只放一个主按钮；如果每个按钮都是主按钮，就等于没有主按钮。
按钮和链接的区别是什么？
按钮用来在当前页面执行操作，比如提交表单、打开对话框、播放视频；链接用来跳转到别的页面或页面里的某个位置，有可以复制、能在新标签页打开的网址。读屏软件对两者的读法不同，键盘操作也不同（空格键能按下按钮，但不能打开链接），所以要按用途选元素：执行操作用 <button>，跳转用 <a href>，外观可以另外设计。
代码里叫什么
| Web (HTML) | <button> <button type="submit"> 如果是跳转到另一个页面，改用 <a href> |
|---|---|
| SwiftUI | Button .buttonStyle(.borderedProminent) .bordered .borderless |
| UIKit | UIButton UIButton.Configuration.filled() .tinted() .plain() |
| Jetpack Compose | Button FilledTonalButton OutlinedButton TextButton IconButton |
| Flutter | FilledButton OutlinedButton TextButton IconButton |
| React (MUI) | <Button variant="contained"> variant="outlined" variant="text" IconButton |
复制给 AI 编程工具
给这个页面理清按钮的层级：最主要的操作用一个品牌色实心主按钮，旁边的备选操作用带边框或浅色底的次按钮，“取消”这类次要操作用文字按钮。执行操作用 <button>，跳转页面用 <a href>；按钮文字用动词（保存、发送）；触摸区域在 iOS 上至少 44×44 pt、Android 上至少 48×48 dp；只有图标的按钮要有无障碍名称；做出悬停、按下、聚焦、禁用和加载中几种状态。