ActionButton

ActionButton es un componente de botón versátil que maneja tanto acciones de clic locales como peticiones HTTP remotas. Soporta íconos en ambos lados, múltiples estilos visuales, variantes de tamaño, una animación de escritura para su etiqueta y un spinner de carga incorporado mientras una petición está en curso.

Úsalo cuando necesites un botón que pueda llamar directamente a un endpoint de API sin escribir lógica de petición en el componente padre.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | title | string | Sí | — | Texto de la etiqueta que se muestra dentro del botó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 | 4 | Radio del borde en píxeles. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Variante visual del botón. | | disabled | boolean | No | false | Deshabilita la interacción y reduce la opacidad. | | startIcon | string | No | — | Identificador del ícono renderizado antes de la etiqueta. | | startIconPaths | string[] | No | — | Datos de path SVG para un ícono de inicio personalizado (alternativa a startIcon). | | startIconSize | number | No | — | Tamaño en píxeles para sobreescribir el ícono de inicio. | | startIconStyle | React.CSSProperties | No | — | Estilos en línea aplicados al ícono de inicio. | | startIconColor | string | No | — | Color del ícono de inicio. | | endIcon | string | No | — | Identificador del ícono renderizado después de la etiqueta. | | endIconPaths | string[] | No | — | Datos de path SVG para un ícono final personalizado. | | endIconSize | number | No | — | Tamaño en píxeles para sobreescribir el ícono final. | | endIconStyle | React.CSSProperties | No | — | Estilos en línea aplicados al ícono final. | | endIconColor | string | No | — | Color del ícono final. | | hasShadow | boolean | No | true | Si se aplica sombra al botón. | | style | React.CSSProperties | No | — | Estilos en línea aplicados al contenedor del botón. | | titleStyle | React.CSSProperties | No | — | Estilos en línea aplicados al texto de la etiqueta. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controla el padding, tamaño de fuente y tamaño del ícono. | | className | string | No | "button" | Nombre de clase CSS aplicado al contenedor. | | animateTitle | boolean | No | false | Cuando es true, la etiqueta aparece con una animación de escritura. | | animationSpeed | number | No | 50 | Velocidad de la animación de escritura en milisegundos por carácter. | | onAnimationComplete | () => void | No | — | Callback que se dispara cuando termina la animación de escritura. | | 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. | | spinnerPosition | "start" \| "end" | No | "end" | Posición del spinner de carga relativa a la etiqueta. | | 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 ActionButton from '@/components/buttons/ActionButton';

export default function Example() {
  return (
    <ActionButton
      title="Guardar cambios"
      onClick={() => console.log('clicked')}
    />
  );
}

Con íconos y estilo outline

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

export default function Example() {
  return (
    <ActionButton
      title="Exportar reporte"
      onClick={() => {}}
      type="outline"
      color="primary"
      startIcon="download"
      size="sm"
    />
  );
}

Llamada a API remota con estado de carga

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

export default function Example() {
  return (
    <ActionButton
      title="Confirmar pedido"
      onClick={() => {}}
      path="/v1/orders"
      method="POST"
      useAuthToken
      data={{ productId: 42, quantity: 1 }}
      onSuccess={(res) => console.log('Pedido creado', res)}
      onError={(err) => console.error('Error', err)}
      spinnerPosition="start"
    />
  );
}

Animación de escritura

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

export default function Example() {
  return (
    <ActionButton
      title="Bienvenido a Snapping!"
      onClick={() => {}}
      animateTitle
      animationSpeed={40}
      onAnimationComplete={() => console.log('Animación completada')}
    />
  );
}