For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/components/float-button.md.
Leaf UIReact 组件库
GitHub

FloatButton 悬浮按钮

提供随时可用的快捷操作。

基础用法

basic.tsx
import { FloatButton, Space, useMessage } from '@ifhover/leaf-ui';

import { Mail, Plus } from 'lucide-react';

export function FloatButtonBasic() {
  const { message } = useMessage();
  return (
    <Space size={16}>
      <FloatButton
        fixed={false}
        startIcon={<Plus size={20} />}
        tooltip={'新建'}
        aria-label={'新建'}
        onClick={() => message.success('已创建')}
      />
      <FloatButton
        fixed={false}
        variant="outline"
        startIcon={<Mail size={20} />}
        tooltip={'收件箱'}
        aria-label={'收件箱'}
      />
    </Space>
  );
}

快捷操作组

basic.tsx
import { FloatButtonGroup, useMessage } from '@ifhover/leaf-ui';

import { Mail, Share2 } from 'lucide-react';

export function FloatButtonActions() {
  const { message } = useMessage();
  return (
    <FloatButtonGroup
      fixed={false}
      actions={[
        {
          key: 'share',
          label: '分享',
          icon: <Share2 size={18} />,
          onClick: () => message.info('分享链接已复制'),
        },
        {
          key: 'mail',
          label: '联系',
          icon: <Mail size={18} />,
          onClick: () => message.info('联系操作'),
        },
      ]}
    />
  );
}

FloatButton API

属性类型默认值说明
variant'solid' | 'outline' | 'soft' | 'link'—设置 variant。
size'sm' | 'md' | 'lg'—展示尺寸。
dangerboolean—设置 danger。
loadingboolean—展示加载状态。
fullWidthboolean—设置 fullWidth。
startIconReactNode—设置 startIcon。
endIconReactNode—设置 endIcon。
tooltipReactNode—显示滑块提示，可定制数值格式。
fixedbooleantrue固定在视口角落；false 时参与页面布局。

FloatButtonAction

属性类型默认值说明
keystring—必需。稳定且唯一的标识。
labelReactNode—必需。展示文字或内容。
iconReactNode—图标内容。
onClick() => void—点击时调用。
disabledboolean—禁用交互。

FloatButtonGroup API

属性类型默认值说明
actionsreadonly FloatButtonAction[]—必需。条目操作区。
fixedbooleantrue固定在视口角落；false 时参与页面布局。
expandablebooleantrue提供展开操作组的按钮。
iconReactNode—图标内容。
openboolean—控制面板是否展开。
defaultOpenbooleanfalse面板初始展开状态。
onOpenChange(open: boolean) => void—面板展开或收起时调用。
classNamestring—设置 className。

类型与交互

组装可复用配置时，可导入对应的属性和数据类型。

import type { FloatButtonProps, FloatButtonAction, FloatButtonGroupProps } from '@ifhover/leaf-ui';

为仅展示图标的操作提供可访问名称。交互控件支持键盘操作，并跟随 ConfigProvider 的主题和减少动画设置。