> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/float-button.html

> 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.

# FloatButton 悬浮按钮

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

## 基础用法


basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/float-button/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

复制代码

```tsx lineNumbers file="../../src/examples/float-button/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'`                     | —      | 展示尺寸。                  |
| `danger`    | `boolean`                                  | —      | 设置 danger。             |
| `loading`   | `boolean`                                  | —      | 展示加载状态。                |
| `fullWidth` | `boolean`                                  | —      | 设置 fullWidth。          |
| `startIcon` | `ReactNode`                                | —      | 设置 startIcon。          |
| `endIcon`   | `ReactNode`                                | —      | 设置 endIcon。            |
| `tooltip`   | `ReactNode`                                | —      | 显示滑块提示，可定制数值格式。        |
| `fixed`     | `boolean`                                  | `true` | 固定在视口角落；false 时参与页面布局。 |

## FloatButtonAction

| 属性         | 类型           | 默认值 | 说明           |
| ---------- | ------------ | --- | ------------ |
| `key`      | `string`     | —   | 必需。稳定且唯一的标识。 |
| `label`    | `ReactNode`  | —   | 必需。展示文字或内容。  |
| `icon`     | `ReactNode`  | —   | 图标内容。        |
| `onClick`  | `() => void` | —   | 点击时调用。       |
| `disabled` | `boolean`    | —   | 禁用交互。        |

## FloatButtonGroup API

| 属性             | 类型                                                       | 默认值     | 说明                     |
| -------------- | -------------------------------------------------------- | ------- | ---------------------- |
| `actions`      | `readonly `[`FloatButtonAction`](#floatbuttonaction)`[]` | —       | 必需。条目操作区。              |
| `fixed`        | `boolean`                                                | `true`  | 固定在视口角落；false 时参与页面布局。 |
| `expandable`   | `boolean`                                                | `true`  | 提供展开操作组的按钮。            |
| `icon`         | `ReactNode`                                              | —       | 图标内容。                  |
| `open`         | `boolean`                                                | —       | 控制面板是否展开。              |
| `defaultOpen`  | `boolean`                                                | `false` | 面板初始展开状态。              |
| `onOpenChange` | `(open: boolean) => void`                                | —       | 面板展开或收起时调用。            |
| `className`    | `string`                                                 | —       | 设置 className。          |

## 类型与交互

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

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

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