Eidetic

Floating Action Bar

Navigation
Block
Interactive

A fixed-position action bar at the bottom of the viewport. Perfect for batch operations, contextual commands, editor toolbars, or quick action menus.

Batch Selection Bar

Shows selected count with contextual actions

Document 1
Document 2
Document 3
Document 4

Variants

Different visual styles

Default
Elevated
Glass (on gradient)

Editor Toolbar

Text formatting toolbar variant

Quick Actions Bar

Simple action bar without selection text

Custom Content

Render custom content instead of actions

Usage

How to implement the Floating Action Bar

import {
 FloatingActionBar,
 BatchSelectionBar,
 EditorToolbar,
 QuickActionsBar,
 type FloatingActionBarAction
} from '@/blocks/navigation/floating-action-bar'


// Define actions
const actions: FloatingActionBarAction[] = [
 { id: 'delete', label: 'Delete', icon: Trash2, variant: 'destructive' },
 { id: 'archive', label: 'Archive', icon: Archive, variant: 'ghost' },
 { id: 'download', label: 'Download', icon: Download, variant: 'ghost' },
]


// Batch selection bar (for multi-select operations)
<BatchSelectionBar
 selectedCount={selected.length}
 totalCount={items.length}
 open={selected.length > 0}
 onClose={() => setSelected([])}
 actions={actions}
/>


// Generic floating action bar
<FloatingActionBar
 open={isOpen}
 onClose={() => setIsOpen(false)}
 actions={actions}
 selectionText="3 items selected"
 variant="elevated"
/>


// Editor toolbar (no close button, glass variant)
<EditorToolbar actions={editorActions} />


// Quick actions bar (no close button)
<QuickActionsBar
 open={true}
 actions={quickActions}
/>

Built With

3 components

This block uses the following UI components from the design system:

ButtonSeparatorTooltip

Props

FloatingActionBar component props

PropTypeDefaultDescription
openbooleantrueWhether the bar is visible
onClose() => void—Callback when bar should close
actionsFloatingActionBarAction[]—Actions to display
selectionTextstring—Selected items count or info text
childrenReactNode—Custom content instead of actions
position"fixed" | "sticky" | "relative""fixed"Positioning mode
showCloseButtonbooleantrueShow close button
variant"default" | "elevated" | "glass""default"Visual style variant

Action Props

FloatingActionBarAction type

PropTypeDefaultDescription
id*string—Unique identifier
label*string—Button label
iconLucideIcon—Icon component
onClick() => void—Click handler
variant"primary" | "secondary" | "ghost" | "destructive""ghost"Button variant
disabledbooleanfalseDisable the action
tooltipstring—Tooltip text

Features

Floating Action Bar capabilities

  • Multiple variants: Default, elevated, and glass visual styles
  • Position modes: Fixed, sticky, or relative positioning
  • Batch selection: Show selected count with BatchSelectionBar preset
  • Editor toolbar: Formatting toolbar with EditorToolbar preset
  • Quick actions: Simple action bar with QuickActionsBar preset
  • Custom content: Render any content using children prop
  • Tooltips: Optional tooltips on action buttons
  • Responsive: Labels hidden on mobile, icons always visible
  • Animations: Smooth slide-in animation
  • Dark mode: Full dark mode support

Related Components

ButtonFloat ButtonTooltipSeparatorDialog