跳到主要内容
Termlib

UI 组件 · 基础

图标按钮

Icon Button

也叫：IconButton、纯图标按钮、圆形按钮、工具按钮

只显示一个图标、没有文字的按钮，用于关闭、更多、编辑、删除这类大家都认得的操作。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在表格每一行的最右侧放两个图标按钮：铅笔图标表示编辑，垃圾桶图标表示删除。按钮 32×32px、无边框，悬停时出现浅灰底色并显示文字提示；每个按钮都加上 aria-label，点删除前先弹出二次确认。

发给

01判断

你的内容是这样吗？

对照两列，确认图标按钮是不是你要找的。

符合这些情况，用图标按钮

  • 表格行、卡片、列表项里重复出现的编辑、删除、更多等操作
  • 工具栏、编辑器顶部这类空间紧凑、操作又多的区域
  • 关闭、返回、搜索这类图标含义几乎人人都认识的操作

是这些情况，换成别的

  • 操作含义不直观，只看图标猜不出点了会发生什么时

  • 页面上最重要的主操作，比如提交订单、立即购买

  • 点击后跳转到其他页面时

    改用链接

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    用了含义模糊的图标又不加文字提示，用户只能挨个点着试

  2. 02

    没加 aria-label，读屏软件只会读出「按钮」两个字

  3. 03

    点击区域太小（比如只有 16px），手机上很难点中

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一个方形或圆形的可点击区域和居中的图标组成，通常搭配悬停时出现的文字提示。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一个单独的小图标，周围没有文字
  2. 2平时没有背景或只有很淡的底色，悬停时出现圆形或方形浅灰底
  3. 3常成排出现在表格行尾、卡片右上角或顶部工具栏

04解释

详细解释

图标按钮是按钮的一种，只保留图标、去掉文字，常见的有关闭（×）、更多（三个点）、编辑（铅笔）、删除（垃圾桶）、搜索（放大镜）。它很省空间，适合放在表格行尾、卡片右上角和工具栏里，一排排重复出现也不显得挤。

和普通 按钮 相比，它的含义全靠图标，所以只适合一看就懂的操作，含义不明显的操作还是要带文字。因为没有文字，必须加 aria-label 给读屏软件读，最好在鼠标悬停时用 文字提示 显示名称。它和只有图标的 链接 看起来可能一样，区别在于点了是跳页面还是执行动作。

开发者信息
术语 ID
component-icon-button
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-btn-icon-only
  • .el-button.is-circle
  • [class*="MuiIconButton-root"]
  • .arco-btn-icon-only
  • .t-button--shape-square
  • .t-button--shape-circle
  • .btn-close
  • button[aria-label]:not(:has(*:not(svg):not(svg *)))
  • button:has(> svg):has(> .sr-only)
  • [role="button"]:has(> svg):has(> .sr-only)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • icon-btn
  • icon-button
  • btn-icon
  • close-btn
  • close-button
  • btn-close
  • action-icon
  • icon-action
  • tool-btn
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • IconButton
  • ActionIcon
  • CloseButton
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 纯图标
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30