IconButton 图标按钮

只包含图标的按钮，必须提供名称，并以名称作为悬停提示。

<script setup lang="ts">
  import { Bookmark, Download, Pencil, Share2, Trash2 } from '@lucide/vue'
  import { IconButton, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <IconButton label="编辑">
      <Pencil />
    </IconButton>
    <IconButton label="收藏">
      <Bookmark />
    </IconButton>
    <IconButton label="分享">
      <Share2 />
    </IconButton>
    <IconButton label="下载">
      <Download />
    </IconButton>
    <IconButton label="删除" tone="danger">
      <Trash2 />
    </IconButton>
  </Inline>
</template>

vue

用法

import { IconButton } from '@hina-ui/vue'

label 是必填属性，它既作为无障碍名称，也作为悬停提示的文字。默认插槽用于放置图标。

<script setup lang="ts">
  import { Search } from '@lucide/vue'
  import { IconButton } from '@hina-ui/vue'
</script>

<template>
  <IconButton label="搜索">
    <Search />
  </IconButton>
</template>

vue

工具栏、表格行尾、卡片右上角等空间有限的位置适合使用它，带有文字的操作仍然使用 Button。

示例

变体与色调

变体与色调与 Button 完全相同，但是默认值不同。IconButton 默认为 ghost 与 neutral，因为它通常出现在密集的界面中，不应当过于突出。

<script setup lang="ts">
  import { Settings, Trash2 } from '@lucide/vue'
  import { IconButton, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <IconButton label="设置" variant="solid" tone="accent">
      <Settings />
    </IconButton>
    <IconButton label="设置" variant="soft">
      <Settings />
    </IconButton>
    <IconButton label="设置" variant="outline">
      <Settings />
    </IconButton>
    <IconButton label="设置">
      <Settings />
    </IconButton>
    <IconButton label="删除" variant="soft" tone="danger">
      <Trash2 />
    </IconButton>
  </Inline>
</template>

vue

尺寸

共三种尺寸。按钮为正方形，边长等于同一档 Button 的高度。

<script setup lang="ts">
  import { Star } from '@lucide/vue'
  import { IconButton, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center">
    <IconButton label="小" size="sm" variant="outline">
      <Star />
    </IconButton>
    <IconButton label="中" size="md" variant="outline">
      <Star />
    </IconButton>
    <IconButton label="大" size="lg" variant="outline">
      <Star />
    </IconButton>
  </Inline>
</template>

vue

状态

设置 loading 后显示加载指示器并阻止点击，设置 disabled 后禁用按钮。加载过程中按钮的尺寸保持不变。

<script setup lang="ts">
  import { ref } from 'vue'
  import { RotateCw, Trash2 } from '@lucide/vue'
  import { IconButton, Inline } from '@hina-ui/vue'

  const refreshing = ref(false)

  function refresh() {
    refreshing.value = true
    setTimeout(() => (refreshing.value = false), 2000)
  }
</script>

<template>
  <Inline>
    <IconButton label="刷新" variant="outline" :loading="refreshing" @click="refresh">
      <RotateCw />
    </IconButton>
    <IconButton label="删除" variant="outline" tone="danger" disabled>
      <Trash2 />
    </IconButton>
  </Inline>
</template>

vue

提示

side 决定提示出现的方向，默认为上方。将 tooltip 设置为 false，可以只保留无障碍名称，不显示提示。

<script setup lang="ts">
  import { Copy, Download, Heart, Search } from '@lucide/vue'
  import { IconButton, Inline } from '@hina-ui/vue'
</script>

<template>
  <Inline>
    <IconButton label="提示在上方" variant="outline">
      <Search />
    </IconButton>
    <IconButton label="提示在右侧" side="right" variant="outline">
      <Copy />
    </IconButton>
    <IconButton label="提示在下方" side="bottom" variant="outline">
      <Download />
    </IconButton>
    <IconButton label="不显示提示" :tooltip="false" variant="outline">
      <Heart />
    </IconButton>
  </Inline>
</template>

vue

提示依赖应用最外层的 TooltipProvider。如果没有挂载它，按钮依然可以正常工作，只是不显示提示，aria-label 不受影响。

API

Props

属性	类型	默认值	说明
`label`	`string`	—	必填。无障碍名称，同时作为提示文字
`tooltip`	`boolean`	`true`	是否显示悬停提示
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`	提示出现的方向
`as`	`string \| Component`	`'button'`	渲染的元素或组件
`asChild`	`boolean`	`false`	不渲染自身，合并至唯一的子元素
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'ghost'`	视觉样式
`tone`	`'accent' \| 'neutral' \| 'danger'`	`'neutral'`	语义色调
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	原生 button 类型
`pill`	`boolean`	`false`	是否呈圆形
`loading`	`boolean`	`false`	是否处于加载状态
`disabled`	`boolean`	`false`	是否禁用
`class`	`string`	—	追加至根元素的类名

Slots

插槽	说明
`default`	图标，加载时被指示器替换