LinkButton

LinkButton tiene el aspecto y comportamiento de un botón normal pero navega al hacer clic. Para rutas internas usa el navigate de React Router, y para URLs absolutas (que comienzan con http:// o https://) establece window.location.href. También se soporta un callback onClick opcional junto con la navegación. Úsalo como reemplazo de <a> o <Link> cuando necesites el sistema completo de estilos de botón.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | title | string | Sí | — | Texto de la etiqueta que se muestra dentro del botón. | | to | string | No | — | Ruta o URL de destino. Las rutas internas usan navigate; las URLs absolutas usan window.location.href. | | onClick | () => void | No | — | Callback opcional que se dispara antes de la navegación. Se puede usar sin to para manejo de clic puro. | | 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 navegación y la interacción. | | startIcon | string | No | — | Identificador del ícono renderizado antes de la etiqueta. | | startIconPaths | any[] | No | — | Datos de path SVG para un ícono de inicio personalizado. | | startIconSize | number | No | — | Tamaño en píxeles para sobreescribir el í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. | | 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 | "link-button" | Nombre de clase CSS aplicado al contenedor. |

Uso

Navegación interna

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

export default function Example() {
  return (
    <LinkButton
      title="Ver pedidos"
      to="/orders"
      startIcon="list"
    />
  );
}

Enlace externo

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

export default function Example() {
  return (
    <LinkButton
      title="Visitar sitio"
      to="https://snapping.dev"
      endIcon="externalLink"
      type="outline"
      size="sm"
    />
  );
}

Navegación con callback

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

export default function Example() {
  return (
    <LinkButton
      title="Ir al checkout"
      to="/checkout"
      onClick={() => console.log('tracking clic')}
    />
  );
}