# IconButton

> Atom — orn-ui

> ⚠️ Requiere <UIProvider>: Este componente (como todos los de orn-ui) debe renderizarse dentro de un ancestro <UIProvider>, o lanza un error en runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Corre en Expo SDK 54, 55, 56 y 57, y en React Native puro >=0.81 con react >=19.1. Sin módulos nativos — funciona en Expo Go, sin prebuild.

## Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)
```bash
npx orn-ui add icon-button
```

O instala el paquete completo e impórtalo
```tsx
pnpm add orn-ui
import { IconButton } from 'orn-ui/icon-button';
```

Depende de: core (theme + icons), pressable-scale

## Variantes

### close

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

### check

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

### search

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

### small

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

### large

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

### custom color

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

### disabled

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

## Código completo del demo

```tsx
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

| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `iconName?` | `IconName` | — | — |
| `icon?` | `ReactNode` | — | — |
| `onPress?` | `(e: GestureResponderEvent) => void` | — | — |
| `size?` | `number` | 24 | — |
| `color?` | `string` | — | — |
| `disabled?` | `boolean` | — | — |
| `style?` | `StyleProp<ViewStyle>` | — | — |
| `accessibilityLabel` | `string` | — | — |