REACT-NATIVES

WIRED FOR SPEED

react-natives v2.2.0

Theme

Light

Dark

Get Started

Components

Navigation

Fab

A floating action button component that stays fixed at a screen corner with icon and optional label sub-components.

Example

Preview

Code

Props

Fab Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the fab button.

placement

'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'

'bottom-right'

The screen corner where the fab is positioned.

size

'sm' | 'md' | 'lg'

'md'

Controls the diameter of the fab.

isExtended

boolean

false

When true, renders the fab in an extended pill shape with a label.

FabIcon Props

Prop

Type

Default

Description

as *

React.ElementType

—

The icon component to render inside the fab.

className

string

—

NativeWind utility classes for the fab icon.

FabLabel Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the fab label text.

Usage Guidelines

When to use

Use Fab for the primary or most common action on a screen, like creating a new item.

Best practices

•

Use for the single most important action on a screen.

•

Place in bottom-right for right-handed ergonomics.

•

Use isExtended with FabLabel for clarity when the icon alone is ambiguous.

Accessibility

Fab is a button with built-in accessibility. Add accessibilityLabel to describe the action when using icon-only.

Related Components

Button

A compound interactive button component with text, icon, and spinner sub-components, supporting multiple actions, variants, and sizes.

Icon

A wrapper component for rendering icon elements from any icon library via the `as` prop.

ActionSheet

A compound bottom-sheet component that slides up from the bottom of the screen with a drag indicator, selectable items, and backdrop.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License