Logo

FAB

A floating action button represents the primary action in an application.

Usage

import * as React from 'react';
import { StyleSheet } from 'react-native';
import { FAB } from 'react-native-paper';

const MyComponent = () => (
  <FAB
    icon="plus"
    style={styles.fab}
    onPress={() => console.log('Pressed')}
  />
);

const styles = StyleSheet.create({
  fab: {
    position: 'absolute',
    margin: 16,
    right: 0,
    bottom: 0,
  },
})

export default MyComponent;

Props

Icon to display for the FAB.

Type: string

Optional label for extended FAB.

Type: boolean
Default value: !theme.isV3

Make the label text uppercased.

Type: string
Default value: label

Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB. Uses label by default if specified.

Accessibility state for the FAB. This is read by the screen reader when the user taps the FAB.

Type: boolean
Default value: true

Whether an icon change is animated.

small
Deprecated in v.3x - use prop size="small".
Type: boolean

Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if label is specified.

Type: string

Custom color for the icon and label of the FAB.

Type: boolean

Whether FAB is disabled. A disabled button is greyed out and onPress is not called on touch.

Type: boolean
Default value: true

Whether FAB is currently visible.

Type: boolean

Whether to show a loading indicator.

Type: () => void

Function to execute on press.

Type: () => void

Function to execute on long press.

size
Available in v5.x with theme version 3
Type: 'small' | 'medium' | 'large'
Default value: 'medium'

Size of the FAB.

  • small - FAB with small height (40).
  • medium - FAB with default medium height (56).
  • large - FAB with large height (96).
customSize
Available in v5.x
Type: number

Custom size for the FAB. This prop takes precedence over size prop

mode
Available in v5.x with theme version 3
Type: 'flat' | 'elevated'
Default value: 'elevated'

Mode of the FAB. You can change the mode to adjust the the shadow:

  • flat - button without a shadow.
  • elevated - button with a shadow.
variant
Available in v5.x with theme version 3
Type: 'primary' | 'secondary' | 'tertiary' | 'surface'
Default value: 'primary'

Color mappings variant for combinations of container and icon colors.

Type: string
Default value: 'fab'
Edit this page