Button

Button es el componente de botón fundamental. Soporta una etiqueta de texto con íconos opcionales al inicio y al final, tres variantes visuales (solid, outline, clear), cinco presets de tamaño y una animación de escritura opcional para la etiqueta. A diferencia de ActionButton, no realiza peticiones HTTP — simplemente llama al manejador onClick proporcionado.

Usa Button para todas las interacciones estándar donde controlas la lógica 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. |

Uso

Básico

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

export default function Example() {
  return (
    <Button
      title="Confirmar"
      onClick={() => console.log('confirmado')}
    />
  );
}

Variante outline con íconos

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

export default function Example() {
  return (
    <Button
      title="Agregar al carrito"
      onClick={() => {}}
      type="outline"
      color="primary"
      startIcon="cart"
      size="sm"
    />
  );
}

Estilo clear para acciones en línea

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

export default function Example() {
  return (
    <Button
      title="Cancelar"
      onClick={() => {}}
      type="clear"
      color="text"
      hasShadow={false}
    />
  );
}

Animación de escritura

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

export default function Example() {
  return (
    <Button
      title="Procesando tu solicitud..."
      onClick={() => {}}
      animateTitle
      animationSpeed={30}
      onAnimationComplete={() => console.log('listo')}
    />
  );
}