Float Button
Ready
Floating action button for quick access to primary actions, with expandable group support.
Basic Usage
Single floating button anchored to bottom-right corner for primary action.
Scroll to bottom-right to see the float button
With Badge
Display notification badge for unread messages or alerts.
5
Button Types
Available in primary, default, and secondary styles.
Primary
Default
Secondary
Sizes
Three size options: small, medium (default), and large.
Small
Medium
Large
Float Button Group
Expandable group of related actions that appear on click or hover.
Click trigger (bottom-right) and Hover trigger (bottom-left)
Features
- •Fixed positioning for persistent access
- •Custom icon support with Lucide React
- •Optional tooltip on hover
- •Badge support for notifications
- •Expandable group with click or hover trigger
- •Animated expand/collapse transitions
- •Three type variants: primary, default, secondary
- •Three size options: sm, md, lg
- •Rotation animation for main button in groups
API Reference
FloatButtonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | LucideIcon | Plus | Icon component from Lucide React |
| type | 'primary' | 'default' | 'secondary' | 'primary' | Button style variant |
| size | 'sm' | 'md' | 'lg' | 'md' | Button size |
| tooltip | string | - | Tooltip text on hover |
| badge | number | string | - | Badge content (e.g., notification count) |
| onClick | () => void | - | Click handler |
| className | string | - | Additional CSS classes |
FloatButton.Group Props
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | 'click' | 'hover' | 'click' | How to expand the group |
| icon | LucideIcon | Plus | Icon for main button |
| closeIcon | LucideIcon | X | Icon when expanded (click trigger only) |
| children | ReactNode | - | FloatButton components in the group |
Usage
import { FloatButton } from '@/components/ui/float-button'
import { Plus, Upload, Download, Share2 } from 'lucide-react'
// Single button
<FloatButton
icon={Plus}
tooltip="Create New"
onClick={() => console.log('Clicked')}
/>
// With badge
<FloatButton
icon={MessageCircle}
badge={5}
tooltip="Messages"
/>
// Float button group
<FloatButton.Group trigger="click">
<FloatButton icon={Upload} tooltip="Upload" size="sm" />
<FloatButton icon={Download} tooltip="Download" size="sm" />
<FloatButton icon={Share2} tooltip="Share" size="sm" />
</FloatButton.Group>