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