Float Button

Navigation

Actions

Floating action button for quick access to primary actions, with expandable group support.

Preview

Single floating button for primary action

The float button appears in the bottom-right corner

Types

Available in primary, default, and secondary styles

Primary

Default

Secondary

Sizes

Three size options: small, medium (default), and large

Small

Medium

Large

With Badge

Display notification badge for unread messages or alerts

Float Button Group

Expandable group of related actions

Click trigger (right) and Hover trigger (left)

Props

Component API reference

FloatButton

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

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 and implementation examples

import { FloatButton } from '@/components/ui/float-button'
import { Plus, Upload, Download, Share2, MessageCircle } from 'lucide-react'

// Single button
<FloatButton
  icon={Plus}
  tooltip="Create New"
  onClick={() => console.log('Clicked')}
/>

// With badge
<FloatButton
  icon={MessageCircle}
  badge={5}
  tooltip="Messages"
/>

// Different types
<FloatButton icon={Plus} type="primary" />
<FloatButton icon={Settings} type="default" />
<FloatButton icon={Share2} type="secondary" />

// Float button group (click trigger)
<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>

// Float button group (hover trigger)
<FloatButton.Group trigger="hover">
  <FloatButton icon={Settings} tooltip="Settings" size="sm" />
  <FloatButton icon={MessageCircle} tooltip="Messages" size="sm" />
</FloatButton.Group>

Features

Built-in functionality

Fixed positioning: Persistent access on screen
Custom icons: Lucide React icon support
Tooltips: Optional hover tooltips
Badge support: Notification indicators
Expandable groups: Click or hover to expand
Animated transitions: Smooth expand/collapse
Three type variants: Primary, default, secondary
Three size options: Small, medium, large
Rotation animation: Main button rotates on expand
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses button element with aria-labelaria-expanded for group stateTooltip provides accessible name

Keyboard Navigation

Key	Action
`Tab`	Focus the button
`Enter`	Activate button
`Space`	Activate button
`Escape`	Close expanded group

Notes

Focus visible ring for keyboard users
Badge count announced to screen readers
Group items are focusable when expanded

Related Components

Back Top Button Tooltip