REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Core Primitives

IconButton

A button designed for icon-only actions without text.

Example

Preview

Code

Props

IconButton Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the icon button.

icon *

React.ComponentType

—

The icon component to render inside the button.

action

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

'primary'

The semantic action color of the button.

variant

'solid' | 'outline' | 'link'

'solid'

The visual style variant of the button.

size

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

'md'

Controls the size of the icon button.

isDisabled

boolean

false

When true, disables the button and dims its appearance.

onPress

() => void

—

Callback invoked when the button is pressed.

Usage Guidelines

When to use

Use IconButton for toolbar actions, close buttons, or any icon-only interactive element.

Best practices

•

Always provide an accessibilityLabel since there is no visible text.

•

Use the outline or link variant for less prominent actions.

•

Match IconButton size to surrounding components for visual harmony.

Accessibility

IconButton must have an accessibilityLabel to describe its action since it has no visible text. Supports disabled state announcement.

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.

Fab

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

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License