FAB

Inputs & Controls

FAB

Floating action button with primary and extended styles.

Usage

Expose the single most common creation action on a screen.

Highlights

• Handles icon-only and extended label modes
• Elevation + state layers baked in

When to use it

• You need a persistent create shortcut.
• Scrolling content should not hide call-to-action.

Related components

ButtonIconButton

Examples

Default

Preview (Web)

import { FAB } from 'react-native-molecules/components/FAB';

export default function Example() {
  return <FAB iconName="plus" onPress={() => console.log('Create')} />;
}

Extended FAB

Preview (Web)

import { FAB } from 'react-native-molecules/components/FAB';

export default function Example() {
  return <FAB iconName="pencil-outline" label="Compose" onPress={() => console.log('Compose')} />;
}

Prop	Type	Default	Description
iconNameRequired	string	—	—
iconType	"material-community" | "feather" | undefined	—	—
iconProps	Omit<IconProps, "ref" | "name" | "type"> | undefined	—	—
label	string | undefined	—	—
labelProps	Omit<Partial<TextProps>, "children"> | undefined	—	—
containerProps	Omit<SurfaceProps, "ref" | "style"> | undefined	—	—
innerContainerStyle	ViewStyle | undefined	—	—
size	"sm" | "md" | "lg" | undefined	—	—
variant	FABVariant | undefined	—	—
elevation	MD3Elevation | undefined	—	—
stateLayerProps	ViewProps | undefined	—	—

Defined in react-native-molecules/components/FAB