ActionIconButton

ActionIconButton es un botón cuadrado de solo ícono con las mismas capacidades de llamada a API que ActionButton. Renderiza un único ícono dentro de un contenedor de tamaño fijo y muestra un spinner mientras una petición está en curso. Úsalo cuando necesites un disparador de acción compacto — como un ícono de eliminar o descargar — que opcionalmente pueda hacer una petición HTTP directamente.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | onClick | () => void | Sí | — | Callback que se dispara cuando se presiona el botón. | | color | string | No | "primary" | Clave de color del tema o cualquier color CSS (hex o nombre). | | borderRadius | number | No | 22 | Radio del borde en píxeles. Usa 99 para un botón completamente redondo. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Variante visual del botón. | | disabled | boolean | No | false | Deshabilita la interacción y reduce la opacidad. | | icon | string | No | — | Identificador del ícono a mostrar dentro del botón. | | iconPaths | any[] | No | — | Datos de path SVG para un ícono personalizado (alternativa a icon). | | iconSize | number | No | — | Tamaño del ícono en píxeles (sobreescribe el tamaño calculado). | | hasShadow | boolean | No | true | Si se aplica sombra al botón. | | containerStyle | React.CSSProperties | No | — | Estilos en línea aplicados al div contenedor exterior. | | buttonStyle | React.CSSProperties | No | — | Estilos en línea aplicados al elemento Touchable interior. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controla las dimensiones del botón y el tamaño del ícono. | | apiBaseUrl | string | No | — | URL base para la petición HTTP. Sobreescribe la URL base del cliente. | | path | string | No | — | Ruta del endpoint de la API. Cuando se provee, se realiza una petición al hacer clic. | | useAuthToken | boolean | No | — | Cuando es true, usa el cliente HTTP autenticado (incluye Bearer token). | | method | "GET" \| "POST" \| "PUT" \| "DELETE" | No | "POST" | Método HTTP para la petición. | | data | Record<string, any> | No | — | Cuerpo de la petición enviado con la llamada HTTP. | | spinnerColor | string | No | — | Color del spinner de carga. | | onSuccess | (response: any) => void | No | — | Callback que se dispara cuando la petición HTTP tiene éxito. | | onError | (error: any) => void | No | — | Callback que se dispara cuando la petición HTTP falla. | | isExport | boolean | No | false | Cuando es true y method es "GET", usa getBlob() para descargar datos binarios. |

Uso

Básico

import ActionIconButton from '@/components/buttons/ActionIconButton';

export default function Example() {
  return (
    <ActionIconButton
      icon="trash"
      onClick={() => console.log('eliminar')}
    />
  );
}

Eliminación remota con token de autenticación

import ActionIconButton from '@/components/buttons/ActionIconButton';

export default function Example({ itemId }: { itemId: string }) {
  return (
    <ActionIconButton
      icon="trash"
      color="danger"
      type="outline"
      size="sm"
      onClick={() => {}}
      path={`/v1/items/${itemId}`}
      method="DELETE"
      useAuthToken
      onSuccess={() => console.log('Elemento eliminado')}
      onError={(err) => console.error(err)}
    />
  );
}

Descarga de archivo exportado

import ActionIconButton from '@/components/buttons/ActionIconButton';

export default function Example() {
  return (
    <ActionIconButton
      icon="download"
      onClick={() => {}}
      path="/v1/reports/export"
      method="GET"
      useAuthToken
      isExport
      onSuccess={(blob) => {
        const url = URL.createObjectURL(blob);
        window.open(url);
      }}
    />
  );
}