IconButton — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add icon-button

O instala el paquete completo e impórtalo

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

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

Uso

cuándo usarlo — Una acción sin espacio para etiqueta — cabeceras de modal, filas de lista, barras de herramientas. Si la etiqueta entra, va Button.
iconName / icon — `iconName` toma un ícono del set incluido; `icon` acepta cualquier nodo cuando el set no alcanza.
size — Un número en puntos (24 por defecto). Conviene mantenerlo parejo dentro de una fila o cabecera.
accessibilityLabel — Obligatoria, y con razón: no hay texto visible, así que es lo único que anuncia un lector de pantalla.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

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 />

Código completo del demo

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

Además acepta testID, que se reenvía al nodo raíz. Existe para los tests end-to-end (Maestro maneja la app por el árbol de accesibilidad) y no cambia en nada cómo se ve ni cómo se comporta el componente.

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