benflux/ui
WOW Effects

Float Button

Fixed-position action button with tooltip, badge, group expansion, and a back-to-top variant.

3
↑ Back to top

Installation

npx benflux-ui add float-button

Usage

import { FloatButton, FloatButtonBackTop, FloatButtonGroup } from "@benflux-ui/react"
import { MessageCircle } from "lucide-react"

// Basic
<FloatButton
  icon={<MessageCircle />}
  tooltip="Chat with us"
  badge={3}
  position={{ bottom: 24, right: 24 }}
  onClick={openChat}
/>

// Square shape, custom size
<FloatButton shape="square" size="lg" icon={<Share2 />} />

// Back to top (shows after 200px scroll)
<FloatButtonBackTop />

// Expandable group
<FloatButtonGroup position={{ bottom: 24, right: 24 }}>
  <FloatButton icon={<Phone />} tooltip="Call" size="sm" />
  <FloatButton icon={<MessageCircle />} tooltip="Chat" size="sm" />
  <FloatButton icon={<Share2 />} tooltip="Share" size="sm" />
</FloatButtonGroup>

Props — FloatButton

PropTypeDefaultDescription
icon*ReactNode—Icon displayed inside the button
tooltipstring—Tooltip text shown on hover
badgenumber | string—Badge value displayed on the top-right corner
shape"circle" | "square""circle"Button shape
size"sm" | "default" | "lg""default"Button size
position{ top?: number; bottom?: number; left?: number; right?: number }—Fixed position offsets (px)
onClick() => void—Click handler