Skip to main content

Floating action button

A floating action button (FAB) represents the primary action of a screen.

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in three types: regular, mini, and extended.

Only use a FAB if it is the most suitable way to present a screen's primary action.

💬 Feedback 🎨 Material Design

Variants#

Regular#

import { FAB } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<FAB icon={props => <Icon name="star" {...props} />} color="primary" />

Extended#

import { FAB } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<FAB variant="extended" label="Button" color="primary" /><FAB  variant="extended"  icon={props => <Icon name="star" {...props} />}  label="Button"  color="primary"/>

Sizing#

import { FAB } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<FAB icon={props => <Icon name="account" {...props} />} /><FAB icon={props => <Icon name="account" {...props} />} size="mini" />
import { FAB } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<FAB variant="extended" icon={props => <Icon name="heart" {...props} />} label="Button" /><FAB  variant="extended"  icon={props => <Icon name="heart" {...props} />}  label="Button"  size="mini"/>

Coloring#

import { FAB } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<FAB icon={props => <Icon name="lock" {...props} />} /><FAB  variant="extended"  icon={props => <Icon name="lock" {...props} />}  label="Button"  tintColor="red"/><FAB icon={props => <Icon name="lock" {...props} />} color="onPrimary" /><FAB icon={props => <Icon name="lock" {...props} />} color="#FDCAE4" /><FAB icon={props => <Icon name="lock" {...props} />} color="#FDCAE4" tintColor="yellow" />

Loading#

import { FAB } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<FAB icon={props => <Icon name="plus" {...props} />} color="primary" loading /><FAB  variant="extended"  icon={props => <Icon name="plus" {...props} />}  label="Button"  color="primary"  loading/><FAB  variant="extended"  icon={props => <Icon name="plus" {...props} />}  label="Button"  color="primary"  loading  loadingIndicatorPosition="overlay"/><FAB icon={props => <Icon name="plus" {...props} />} size="mini" color="primary" loading />

Custom Loading Indicator#

import { FAB } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<FAB  icon={props => <Icon name="plus" {...props} />}  color="error"  loading  loadingIndicator="⏳"/><FAB  variant="extended"  icon={props => <Icon name="plus" {...props} />}  label="Button"  color="onError"  loading  loadingIndicator={props => (    <Text      style={{        width: 24,        height: 24,        backgroundColor: props.color,        color: "white",        borderRadius: 12,        textAlign: "center",      }}    >      ...    </Text>  )}/><FAB  variant="extended"  icon={props => <Icon name="plus" {...props} />}  label="Button"  color="onError"  loading  loadingIndicator="Loading..."  loadingIndicatorPosition="overlay"/><FAB  icon={props => <Icon name="plus" {...props} />}  size="mini"  color="onError"  loading  loadingIndicator="⏰"/>

Visibility#

import { FAB } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<FAB icon={props => <Icon name="plus" {...props} />} visible={false} /><FAB size="mini" icon={props => <Icon name="plus" {...props} />} visible={false} /><FAB  variant="extended"  icon={props => <Icon name="navigation" {...props} />}  label="Navigate"  color="primary"  visible={false}/>