MapPin

Map marker pin button with default, precision, price, and cluster variants.

Installation

pnpm add @wandercom/design-system-web

Usage

10 lines
import { MapPin } from '@wandercom/design-system-web/ui/map-pin';

export function Example() {
  return (
    <div className="flex items-center gap-4">
      <MapPin />
      <MapPin variant="price" price={{ currency: 'USD', fractional: 15000 }} />
    </div>
  );
}

Variants

Default

Loading example...
2 lines
<MapPin />
<MapPin isActive />

Price

Loading example...
1 lines
<MapPin variant="price" price={{ currency: 'USD', fractional: 15000 }} />

Cluster

Loading example...
1 lines
<MapPin variant="cluster" count={5} />

Precision

Loading example...
2 lines
<MapPin variant="precision" />
<MapPin variant="precision" color="yellow" />

Props

variant?:

'default' | 'precision' | 'price' | 'cluster'
Visual variant. Defaults to 'default'.

isActive?:

boolean
Whether the pin is active (selected). Applies to default, price, and cluster.

price?:

{ currency: string; fractional: number }
Price to display when variant is 'price'.

count?:

number
Count to display when variant is 'cluster'.

color?:

'default' | 'yellow'
Pin color for the precision variant. Defaults to 'default'.

icon?:

ReactNode
Optional icon to render inside the precision pin.

pinLabel?:

string
Accessible label for the default and precision variants. Defaults to "Map pin".

getCountLabel?:

(count: number) => string
Formatter for the cluster variant's accessible label, given the listing count. Override to localize pluralization. Defaults to "{count} listing(s) in this area".

className?:

string
Additional CSS classes for the root button.
MapPin