TooltipIconButton

TooltipIconButton 组合了 Button 和 Tooltip 组件，提供一个带工具提示的图标按钮。

引入

import { TooltipIconButton } from "aui-components";

基本用法

<TooltipIconButton tooltip="Copy">
  <CopyIcon />
</TooltipIconButton>

Props

属性	类型	默认值	说明
`className`	`enum`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`variant`	`enum`	—	—
`size`	`enum`	—	—
`style`	`enum`	—	Style applied to the element, or a function that returns a style object based on the component's state.
`focusableWhenDisabled`	`enum`	`false`	Whether the button should be focusable when disabled.
`nativeButton`	`enum`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`render`	`enum`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`tooltip`*	`string`	—	tooltip 提示文字内容
`side`	`enum`	`bottom`	—

继承所有 @base-ui/react Button 的 Props，包括 variant、size、onClick 等。

示例

基础

<TooltipIconButton tooltip="Edit message" side="top">
  <PencilIcon />
</TooltipIconButton>

不同方向

<TooltipIconButton tooltip="Top" side="top">
  <ArrowUpIcon />
</TooltipIconButton>

<TooltipIconButton tooltip="Bottom" side="bottom">
  <ArrowDownIcon />
</TooltipIconButton>

<TooltipIconButton tooltip="Left" side="left">
  <ArrowLeftIcon />
</TooltipIconButton>

<TooltipIconButton tooltip="Right" side="right">
  <ArrowRightIcon />
</TooltipIconButton>

自定义样式

<TooltipIconButton
  tooltip="Send message"
  side="bottom"
  variant="default"
  size="icon"
  className="size-7 rounded-full"
  onClick={() => console.log("send")}
>
  <ArrowUpIcon />
</TooltipIconButton>

与 Base Button Props

<TooltipIconButton
  tooltip="Refresh"
  variant="ghost"
  size="icon"
  disabled={isLoading}
  aria-label="Refresh message"
>
  <RefreshCwIcon className={isLoading ? "animate-spin" : ""} />
</TooltipIconButton>

内部实现

TooltipIconButton 是对 Button 和 Tooltip 的薄封装：

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger
      render={<Button variant="ghost" size="icon" ref={ref} {...rest} />}
    >
      {children}
      <span className="sr-only">{tooltip}</span>
    </TooltipTrigger>
    <TooltipContent side={side}>{tooltip}</TooltipContent>
  </Tooltip>
</TooltipProvider>

使用 forwardRef 支持 ref 转发
内置 sr-only 文字用于无障碍访问
默认样式：size-6 p-1 active:scale-90
图标颜色变体：text-inherit（由父组件控制）

TooltipIconButton

引入

基本用法

Props

示例

基础

不同方向

自定义样式

与 Base Button Props

内部实现

相关链接

On this page