FloatingButton

A prominent floating action button for primary actions that can be positioned at the bottom of the screen.

Import

import FloatingButton from '@/components/FloatingButton';

Features

Fixed positioning at the bottom of the screen
Customizable icon and label
Navigation support via href
Animation options for visibility
Support for custom actions

Props

Prop	Type	Default	Description
`icon`	`IconName`	—	Icon to display in the button
`label`	`string`	—	Text label for the button
`href`	`string`	—	Navigation destination
`onPress`	`() => void`	—	Custom press handler
`animated`	`boolean`	`false`	Whether to animate visibility
`visible`	`boolean`	`true`	Controls visibility when animated
`position`	`'bottom-left' \| 'bottom-right' \| 'bottom-center'`	`'bottom-right'`	Button position on screen
`className`	`string`	—	Additional classes for styling

Basic Usage

// Simple floating button with icon
<FloatingButton 
  icon="Plus" 
  onPress={handleAddItem} 
/>
 
// With text label
<FloatingButton 
  icon="Plus" 
  label="New Item" 
  href="/items/new" 
/>
 
// Animated button that responds to scroll
<FloatingButton 
  icon="ArrowUp" 
  animated 
  visible={!isAtTop} 
  onPress={scrollToTop} 
/>

FloatingButton

FloatingButton

Import

Features

Props

Basic Usage

On this page