GoogleMapsButton

GoogleMapsButton constructs a Google Maps URL from a text address or coordinates string and opens it in a new browser tab when clicked. It wraps the base Button component and defaults to an info color with a map marker icon. Use it on contact pages, store locators, or anywhere you need to surface a location.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | address | string | Yes | — | Address or coordinates to search on Google Maps (e.g. "Buenos Aires, Argentina" or "-34.6037,-58.3816"). | | title | string | No | "Cómo llegar" | Label displayed on the button. | | icon | string | No | "marker" | Icon identifier shown before the label. | | color | string | No | "info" | Theme color key or any CSS hex/named color. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Visual variant of the button. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controls padding, font size, and icon size. | | borderRadius | number | No | 4 | Border radius in pixels. | | disabled | boolean | No | false | Disables interaction and reduces opacity. | | style | React.CSSProperties | No | — | Inline styles applied to the button. |

Usage

Basic

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

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

Custom label and style

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

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