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	—	name of the icon
iconType	IconType | undefined	—	type of the icon
iconProps	Omit<IconProps, "ref" | "name" | "type"> | undefined	—	icon component's props
label	string | undefined	—	Label of the FAB, if provided the FAB will be on extended mode
labelProps	Omit<Partial<TextProps>, "children"> | undefined	—	Props of the label
containerProps	Omit<SurfaceProps, "ref" | "style"> | undefined	—	Props for the surface container
innerContainerStyle	ViewStyle | undefined	—	Props for the innner touchable container
size	"sm" | "md" | "lg" | undefined	—	sizes of the FAB
variant	FABVariant | undefined	—	variants of the FAB
elevation	MD3Elevation | undefined	—	Elevation level
stateLayerProps	ViewProps | undefined	—	Props for the state layer

Defined in react-native-molecules/components/FAB