Skip to main content

Floating action button (FAB)

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

Import

import { FAB } from "@react-native-material/core";

Variants

Regular

Extended

Sizing

Coloring

Loading

Custom Loading Indicator

Visibility

Props

icon

Type: React.ReactElement | ((props: { color: string; size: number }) => React.ReactElement | null) | null;

Optional: Yes


label

Type: string | React.ReactElement | ((props: { color: string }) => React.ReactElement | null) | null;

Optional: Yes


variant

Type: "standard" | "extended";

Optional: Yes


size

Type: "default" | "mini";

Optional: Yes


color

Type: Color;

Optional: Yes


tintColor

Type: Color;

Optional: Yes


loading

Type: boolean;

Optional: Yes


loadingIndicator

Type: string | React.ReactElement | ((props: { color: string }) => React.ReactElement | null) | null;

Optional: Yes


loadingIndicatorPosition

Type: "icon" | "overlay";

Optional: Yes


visible

Type: boolean;

Optional: Yes


pressableContainerStyle

Type: StyleProp<ViewStyle>;

Optional: Yes


contentContainerStyle

Type: PressableProps["style"];

Optional: Yes


iconContainerStyle

Type: StyleProp<ViewStyle>;

Optional: Yes


labelContainerStyle

Type: StyleProp<ViewStyle>;

Optional: Yes


labelStyle

Type: StyleProp<TextStyle>;

Optional: Yes


loadingOverlayContainerStyle

Type: StyleProp<ViewStyle>;

Optional: Yes


...SurfaceProps, ...PressableProps, ...PressableProps