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

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# FloatButton

Keep quick actions within reach.

## Basic usage


basic.tsx

Copy code

```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={'Create'}
        aria-label={'Create'}
        onClick={() => message.success('Created')}
      />
      <FloatButton
        fixed={false}
        variant="outline"
        startIcon={<Mail size={20} />}
        tooltip={'Inbox'}
        aria-label={'Inbox'}
      />
    </Space>
  );
}
```

Expand code

## Action group


basic.tsx

Copy code

```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: 'Share',
          icon: <Share2 size={18} />,
          onClick: () => message.info('Share link copied'),
        },
        {
          key: 'mail',
          label: 'Contact',
          icon: <Mail size={18} />,
          onClick: () => message.info('Contact action'),
        },
      ]}
    />
  );
}
```

Expand code

## FloatButton API

| Property    | Type                                       | Default | Description                                              |
| ----------- | ------------------------------------------ | ------- | -------------------------------------------------------- |
| `variant`   | `'solid' \| 'outline' \| 'soft' \| 'link'` | —       | Configure variant.                                       |
| `size`      | `'sm' \| 'md' \| 'lg'`                     | —       | Presentation size.                                       |
| `danger`    | `boolean`                                  | —       | Configure danger.                                        |
| `loading`   | `boolean`                                  | —       | Show a loading state.                                    |
| `fullWidth` | `boolean`                                  | —       | Configure full width.                                    |
| `startIcon` | `ReactNode`                                | —       | Configure start icon.                                    |
| `endIcon`   | `ReactNode`                                | —       | Configure end icon.                                      |
| `tooltip`   | `ReactNode`                                | —       | Show a thumb tooltip, optionally with custom formatting. |
| `fixed`     | `boolean`                                  | `true`  | Fix to a viewport corner; false keeps it in layout.      |

## FloatButtonAction

| Property   | Type         | Default | Description                          |
| ---------- | ------------ | ------- | ------------------------------------ |
| `key`      | `string`     | —       | Required. Stable, unique identifier. |
| `label`    | `ReactNode`  | —       | Required. Visible label or content.  |
| `icon`     | `ReactNode`  | —       | Icon content.                        |
| `onClick`  | `() => void` | —       | Called on click.                     |
| `disabled` | `boolean`    | —       | Disable interaction.                 |

## FloatButtonGroup API

| Property       | Type                                                     | Default | Description                                         |
| -------------- | -------------------------------------------------------- | ------- | --------------------------------------------------- |
| `actions`      | `readonly `[`FloatButtonAction`](#floatbuttonaction)`[]` | —       | Required. Actions for the item.                     |
| `fixed`        | `boolean`                                                | `true`  | Fix to a viewport corner; false keeps it in layout. |
| `expandable`   | `boolean`                                                | `true`  | Provide a button to expand the action group.        |
| `icon`         | `ReactNode`                                              | —       | Icon content.                                       |
| `open`         | `boolean`                                                | —       | Control whether the panel is open.                  |
| `defaultOpen`  | `boolean`                                                | `false` | Initial open state.                                 |
| `onOpenChange` | `(open: boolean) => void`                                | —       | Called when the panel opens or closes.              |
| `className`    | `string`                                                 | —       | Configure class name.                               |

## Types and interaction

Import the props and data types when creating reusable configuration.

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

Provide accessible labels for icon-only actions. Interactive controls support keyboard navigation and respect ConfigProvider themes and reduced motion.