IconButton 图标按钮

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

import { Bookmark, Download, Pencil, Share2, Trash2 } from 'lucide-react'
import { IconButton, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline>
      <IconButton label="编辑">
        <Pencil />
      </IconButton>
      <IconButton label="收藏">
        <Bookmark />
      </IconButton>
      <IconButton label="分享">
        <Share2 />
      </IconButton>
      <IconButton label="下载">
        <Download />
      </IconButton>
      <IconButton label="删除" tone="danger">
        <Trash2 />
      </IconButton>
    </Inline>
  )
}

tsx

用法

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

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

import { Search } from 'lucide-react'
import { IconButton } from '@hina-ui/react'

export default function Demo() {
  return (
    <IconButton label="搜索">
      <Search />
    </IconButton>
  )
}

tsx

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

示例

变体与色调

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

import { Settings, Trash2 } from 'lucide-react'
import { IconButton, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <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>
  )
}

tsx

尺寸

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

import { Star } from 'lucide-react'
import { IconButton, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <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>
  )
}

tsx

状态

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

'use client'

import { useState } from 'react'
import { RotateCw, Trash2 } from 'lucide-react'
import { IconButton, Inline } from '@hina-ui/react'

export default function Demo() {
  const [refreshing, setRefreshing] = useState(false)

  function refresh() {
    setRefreshing(true)
    setTimeout(() => setRefreshing(false), 2000)
  }

  return (
    <Inline>
      <IconButton label="刷新" variant="outline" loading={refreshing} onClick={refresh}>
        <RotateCw />
      </IconButton>
      <IconButton label="删除" variant="outline" tone="danger" disabled>
        <Trash2 />
      </IconButton>
    </Inline>
  )
}

tsx

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

import { Copy, Download, Heart, Search } from 'lucide-react'
import { IconButton, Inline } from '@hina-ui/react'

export default function Demo() {
  return (
    <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>
  )
}

tsx

提示依赖应用最外层的 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`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	原生 button 类型
`pill`	`boolean`	`false`	是否呈圆形
`loading`	`boolean`	`false`	是否处于加载状态
`disabled`	`boolean`	`false`	是否禁用
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`children`	图标，加载时被指示器替换