u

code/g3soft-libs/docs/examples/button/icon.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
-import { G3Button } from '@g3soft/ui'
+// #icon 插槽放图标；纯图标按钮用 type="icon"，并补 aria-label
+import { G3Button, G3Space } from '@g3soft/ui'
+import { Plus, Search, Trash2 } from '@lucide/vue'
 </script>
 
 <template>
-  <G3Button type="primary">
-    <template #icon>+</template>
-    新增
-  </G3Button>
-  <G3Button icon-only title="搜索">🔍</G3Button>
+  <G3Space :size="[12, 12]" align="center" wrap>
+    <G3Button>
+      <template #icon><Plus /></template>
+      新增
+    </G3Button>
+
+    <!-- 纯图标按钮：没有文字，必须给 aria-label -->
+    <G3Button type="icon" aria-label="搜索">
+      <template #icon><Search /></template>
+    </G3Button>
+
+    <G3Button type="icon" size="small" aria-label="删除">
+      <template #icon><Trash2 /></template>
+    </G3Button>
+
+    <G3Button type="icon" size="large" aria-label="新增">
+      <template #icon><Plus /></template>
+    </G3Button>
+  </G3Space>
 </template>