For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/float-button.md.
Leaf UI
  • English

      • 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' | 'ghost' | '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.