WebsiteButton

WebsiteButton abre una URL dada en una nueva pestaña del navegador (window.open) al hacer clic. Envuelve el componente base Button y usa por defecto el color primario con un ícono de globo terráqueo. Úsalo en perfiles de organizaciones, tarjetas de proveedores o cualquier vista que muestre un enlace a un sitio web externo.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | url | string | Sí | — | URL a abrir en una nueva pestaña. Debe ser una URL completa (ej. https://ejemplo.com). | | title | string | No | "Visitar sitio" | Etiqueta que se muestra en el botón. | | icon | string | No | "world" | Identificador del ícono mostrado antes de la etiqueta. | | color | string | No | "primary" | Clave de color del tema o cualquier color CSS (hex o nombre). | | type | "clear" \| "outline" \| "solid" | No | "solid" | Variante visual del botón. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controla el padding, tamaño de fuente y tamaño del ícono. | | borderRadius | number | No | 4 | Radio del borde en píxeles. | | disabled | boolean | No | false | Deshabilita la interacción y reduce la opacidad. | | style | React.CSSProperties | No | — | Estilos en línea aplicados al botón. |

Uso

Básico

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

export default function Example() {
  return (
    <WebsiteButton url="https://snapping.dev" />
  );
}

Etiqueta personalizada y estilo outline

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

export default function SupplierCard({ supplier }: { supplier: { website: string } }) {
  return (
    <WebsiteButton
      url={supplier.website}
      title="Visitar sitio web"
      type="outline"
      size="sm"
      borderRadius={8}
    />
  );
}