IconButton — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add icon-button

Or install the whole package and import it

pnpm add orn-ui
import { IconButton } from 'orn-ui/icon-button';

Depends on:core (theme + icons)pressable-scale

Usage

when to use — An action with no room for a label — modal headers, list rows, toolbars. If the label fits, use Button.
iconName / icon — `iconName` picks a bundled glyph; `icon` takes any node when the set falls short.
size — A number in points (24 by default). Keep it consistent within a row or header.
accessibilityLabel — Required, and for good reason: there is no visible text, so it is the only thing a screen reader announces.

Demo clip not recorded yet — see MEDIA.md

Variants

close

<IconButton iconName="close" accessibilityLabel="Close" onPress={() => {}} />

check

<IconButton iconName="check" accessibilityLabel="Confirm" onPress={() => {}} />

search

<IconButton iconName="search" accessibilityLabel="Search" onPress={() => {}} />

small

<IconButton iconName="check" size={16} accessibilityLabel="Small" onPress={() => {}} />

large

<IconButton iconName="check" size={32} accessibilityLabel="Large" onPress={() => {}} />

custom color

<IconButton iconName="check" color="#ff3b30" accessibilityLabel="Red" onPress={() => {}} />

disabled

<IconButton iconName="close" accessibilityLabel="Disabled" onPress={() => {}} disabled />

Full demo source

const variants: VariantDef[] = [
  { label: 'close', content: <IconButton iconName="close" accessibilityLabel="Close" onPress={() => {}} /> },
  { label: 'check', content: <IconButton iconName="check" accessibilityLabel="Confirm" onPress={() => {}} /> },
  { label: 'search', content: <IconButton iconName="search" accessibilityLabel="Search" onPress={() => {}} /> },
  { label: 'small', content: <IconButton iconName="check" size={16} accessibilityLabel="Small" onPress={() => {}} /> },
  { label: 'large', content: <IconButton iconName="check" size={32} accessibilityLabel="Large" onPress={() => {}} /> },
  { label: 'custom color', content: <IconButton iconName="check" color="#ff3b30" accessibilityLabel="Red" onPress={() => {}} /> },
  { label: 'disabled', content: <IconButton iconName="close" accessibilityLabel="Disabled" onPress={() => {}} disabled /> },
];
return <VariantList variants={variants} />;

Props

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

Name	Type	Default	Description
`iconName?`	`IconName`	—	—
`icon?`	`ReactNode`	—	—
`onPress?`	`(e: GestureResponderEvent) => void`	—	—
`size?`	`number`	24	—
`color?`	`string`	—	—
`disabled?`	`boolean`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—
`accessibilityLabel`	`string`	—	—