GoogleMapsButton

GoogleMapsButton construye una URL de Google Maps a partir de una dirección de texto o cadena de coordenadas y la abre en una nueva pestaña del navegador al hacer clic. Envuelve el componente base Button y usa por defecto un color info con un ícono de marcador de mapa. Úsalo en páginas de contacto, localizadores de tiendas o donde necesites mostrar una ubicación.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | address | string | Sí | — | Dirección o coordenadas para buscar en Google Maps (ej. "Buenos Aires, Argentina" o "-34.6037,-58.3816"). | | title | string | No | "Cómo llegar" | Etiqueta que se muestra en el botón. | | icon | string | No | "marker" | Identificador del ícono mostrado antes de la etiqueta. | | color | string | No | "info" | 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 GoogleMapsButton from '@/components/buttons/GoogleMapsButton';

export default function Example() {
  return (
    <GoogleMapsButton address="Av. Corrientes 1234, Buenos Aires" />
  );
}

Etiqueta y estilo personalizados

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

export default function StoreCard({ store }: { store: { address: string } }) {
  return (
    <GoogleMapsButton
      address={store.address}
      title="Ver en el mapa"
      type="outline"
      size="sm"
      borderRadius={8}
    />
  );
}