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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/en/components/float-button.md.
Leaf UIReact components
GitHub

FloatButton

Keep quick actions within reach.

Basic usage

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>
  );
}

Action group

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'),
        },
      ]}
    />
  );
}

FloatButton API

PropertyTypeDefaultDescription
variant'solid' | 'outline' | 'soft' | 'link'—Configure variant.
size'sm' | 'md' | 'lg'—Presentation size.
dangerboolean—Configure danger.
loadingboolean—Show a loading state.
fullWidthboolean—Configure full width.
startIconReactNode—Configure start icon.
endIconReactNode—Configure end icon.
tooltipReactNode—Show a thumb tooltip, optionally with custom formatting.
fixedbooleantrueFix to a viewport corner; false keeps it in layout.

FloatButtonAction

PropertyTypeDefaultDescription
keystring—Required. Stable, unique identifier.
labelReactNode—Required. Visible label or content.
iconReactNode—Icon content.
onClick() => void—Called on click.
disabledboolean—Disable interaction.

FloatButtonGroup API

PropertyTypeDefaultDescription
actionsreadonly FloatButtonAction[]—Required. Actions for the item.
fixedbooleantrueFix to a viewport corner; false keeps it in layout.
expandablebooleantrueProvide a button to expand the action group.
iconReactNode—Icon content.
openboolean—Control whether the panel is open.
defaultOpenbooleanfalseInitial open state.
onOpenChange(open: boolean) => void—Called when the panel opens or closes.
classNamestring—Configure class name.

Types and interaction

Import the props and data types when creating reusable configuration.

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.