MultinaireFloatingActionButton

Floating action button (FAB) for primary screen actions.

Basic Usage

import { MultinaireFloatingActionButton } from '@multinaire/multinaire-design';

<MultinaireFloatingActionButton
  icon="Plus"
  title="Add"
  onPress={() => {}}
/>

Props

Prop	Type	Default	Description
title	string	-	Button label text
icon	MultinaireIcons	-	Icon to display
reversed	boolean	false	Place icon after text
position	'left' | 'center' | 'right'	'right'	Horizontal position
width	number	-	Button width
height	number	-	Button height
margin	SpacingProps	-	Margin spacing
animate	boolean	false	Enable entrance animation
isLoading	boolean	false	Show loading state
onPress	() => void	-	Press handler

Examples

Basic FAB

<MultinaireFloatingActionButton
  icon="Plus"
  title="New"
  onPress={() => createNew()}
/>

Icon Only FAB

<MultinaireFloatingActionButton
  icon="Plus"
  title=""
  width={56}
  height={56}
  onPress={() => {}}
/>

Different Positions

// Right aligned (default)
<MultinaireFloatingActionButton
  position="right"
  icon="Plus"
  title="Add"
  onPress={() => {}}
/>

// Center aligned
<MultinaireFloatingActionButton
  position="center"
  icon="Camera"
  title="Capture"
  onPress={() => {}}
/>

// Left aligned
<MultinaireFloatingActionButton
  position="left"
  icon="Menu"
  title="Menu"
  onPress={() => {}}
/>

With Animation

<MultinaireFloatingActionButton
  animate
  icon="Plus"
  title="Create"
  onPress={() => {}}
/>

In a Screen Layout

<MultinaireContainer flex={1}>
  <MultinaireListView data={items} renderItem={...} />

  <MultinaireFloatingActionButton
    icon="Plus"
    title="Add Item"
    onPress={() => navigation.navigate('AddItem')}
  />
</MultinaireContainer>