REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Core Primitives

Button

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

Example

Preview

Code

Props

Button Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the button.

action

'primary' | 'secondary' | 'positive' | 'negative' | 'default'

'primary'

The semantic action color of the button.

variant

'link' | 'outline' | 'solid'

'solid'

The visual variant of the button.

size

'xs' | 'sm' | 'md' | 'lg' | 'xl'

'md'

Controls the height and padding of the button.

isDisabled

boolean

false

When true, disables the button and applies disabled styling.

ButtonText Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the button label text.

action

'primary' | 'secondary' | 'positive' | 'negative' | 'default'

—

Overrides the action color inherited from the Button parent.

variant

'link' | 'outline' | 'solid'

—

Overrides the variant inherited from the Button parent.

size

'xs' | 'sm' | 'md' | 'lg' | 'xl'

—

Overrides the size inherited from the Button parent.

ButtonIcon Props

Prop

Type

Default

Description

as

React.ElementType

—

The icon component to render inside the button.

className

string

—

NativeWind utility classes for the button icon.

size

'xs' | 'sm' | 'md' | 'lg' | 'xl' | number

—

Overrides the icon size. Accepts a preset or numeric pixel value.

height

number

—

Explicit height for the icon in pixels.

width

number

—

Explicit width for the icon in pixels.

ButtonGroup Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the button group container.

space

'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'

'md'

The spacing between buttons in the group.

isAttached

boolean

false

When true, removes spacing and merges button borders.

flexDirection

'row' | 'column' | 'row-reverse' | 'column-reverse'

'row'

The flex direction of the button group.

Usage Guidelines

When to use

Use Button for primary user actions like form submission, navigation triggers, or confirmations.

Best practices

•

Use action="primary" for the main call-to-action on a screen.

•

Limit to one primary action button per view to maintain clear hierarchy.

•

Use ButtonSpinner during async operations to indicate loading.

Accessibility

Button is automatically focusable and pressable. Use accessibilityLabel when ButtonText alone does not describe the action.

Related Components

Link

A pressable link component for in-app and external navigation with accessible text styling.

Fab

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

Icon

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

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License