Home
Previous componentNext component

Map pin

Open in fibo's Storybook

Map pin marks a point on a map as a dot, an icon or a labeled pill, and opens a preview card when you click or tap it. It brings no map of its own: your map library places it and moves it as the map pans and zooms. The map here is a stand-in drawn with the site's colors.

Map pinHover the dot, then click it. The card grows out of the pin.

Anatomy

A button on the map, and a card portalled to the body so no map container clips it. The card only renders when there's something to preview.

  1. Pin
  2. Image
  3. Meta
  4. Title
  5. Description
  6. Content
The cardHeld open over its pin.

Variants and states

Label pinsA short value in a pill. The open one fills in, so it's clear whose card is showing.
Icon pinsFor maps where the kind of place matters. Without an icon, it shows a map-pin icon.
ColorsStatus colors saying whether each place is open. The status is in each label and meta too.
Labels with iconsA label can lead with an icon and colors its text to match the variant.
Sizessm shrinks all three types. The dot's press area stays 32px either way.
Without a previewWith nothing to preview, the pin is a plain button.

Usage

  • 01Use dots for places, icons when the kind of place matters, and labels when a value matters at a glance, such as prices or times. Keep labels to a few characters.
  • 02Keep pins default unless color means something, such as open or closed. Put the meaning in a legend and in each pin's label too.
  • 03Give every pin a label, the place's name. It's what screen readers announce and what the preview is named by.
  • 04Keep the card short: an image, a title, a line of description. Put the full page behind a link in the content.
  • 05Leave side at top for most maps. The card flips on its own when it would leave the screen.

Actions in the card

Children go under the other fields, for actions such as directions or saving the place. The card stays open until you close it, so it can hold them.

Click the dot to see the buttons.

With a list beside the map

open and onOpenChange let a list choose the open pin. Picking a row opens its card; opening a pin selects its row.

Pick a place, or click a dot.

Best practices

DoKeep labels to a short value people compare.
Don'tDon't spell out whole names on the map. Long pills crowd each other; put names in the preview.

Accessibility

KeyDoes
TabDoesMoves between the pins
Space or ↵DoesOpens the preview and moves focus into it
EscDoesCloses the preview and puts focus back on the pin
  • 01Each pin is a button named by its label, and says it opens a dialog. A label pin showing a price is still announced by the place's name.
  • 02The preview is a dialog named by the pin's label, so screen readers announce which place they're in.
  • 03A dot is 16px to look at but takes presses across 32px, above the 24px minimum target.
  • 04Color never stands alone: put the status a color stands for in the pin's label and in the preview.
  • 05With reduced motion, the pin changes without animating and the card fades in place.

References