MapMarkerYou

Stable
WCAG 2.2 evidence
RTL

Where the user is on a map: a blue dot with a translucent accuracy circle. The map is not part of the library: position the marker yourself, centred on the coordinates (translate(-50%, -50%)), and size the accuracy circle with className (for example size-24) if you know the accuracy. It is a shape and a name, never a control: exposed as an image named label ("Your location"), so the marker's meaning does not depend on its colour (WCAG 1.1.1, 1.4.1), or hidden with isDecorative when the location is stated in text. Presentational: renders in React Server Components. Consumer duties: show a user's position only with their consent, and give the same information as text next to the map (an address or "Near Gulberg III") for people who cannot see the map.

import { MapMarkerYou } from "@nexera-ui/react";

Loading example…

5
examples: 3
props: 2
live controls: 1
platform: 5
WCAG criteria: 0
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

label

isDecorativefalse

Generated code

import { MapMarkerYou } from "@nexera-ui/react";

<MapMarkerYou />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

On map surfaces

On a map surface (the map-* tokens, light and dark): the 3 px surface stroke keeps the dot readable on land, water and parks.

Loading example…

app.tsx

import { MapMarkerYou } from "@nexera-ui/react";

export function OnMapSurfaces() {
  return (
    <div className="flex flex-wrap gap-4">
      {["bg-map-land", "bg-map-water", "bg-map-park", "bg-map-building"].map((surface) => (
        <div
          key={surface}
          className={`flex size-28 items-center justify-center rounded-md ${surface}`}
        >
          <MapMarkerYou />
        </div>
      ))}
    </div>
  );
}

Large accuracy

A larger accuracy circle: size the marker with className; the dot keeps its 18 px.

Loading example…

app.tsx

import { MapMarkerYou } from "@nexera-ui/react";

export function LargeAccuracy() {
  return (
    <div className="bg-map-land flex size-48 items-center justify-center rounded-md">
      <MapMarkerYou className="size-40" label="Your location, accurate to 200 metres" />
    </div>
  );
}

Decorative

Decorative: when the position is written as text next to the map, hide the marker.

Loading example…

app.tsx

import { MapMarkerYou } from "@nexera-ui/react";

export function Decorative() {
  return (
    <p className="text-body-default text-primary m-0 flex items-center gap-2">
      <MapMarkerYou isDecorative className="size-8" />
      You are near Gulberg III, Lahore.
    </p>
  );
}

Right to left

Right-to-left: the marker is symmetric, so nothing changes.

Loading example…

app.tsx

import { MapMarkerYou } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <div dir="rtl" lang="ar" className="flex items-center gap-3">
      <MapMarkerYou label="موقعك" />
      <span className="text-body-default text-primary">أنت بالقرب من غولبرغ</span>
    </div>
  );
}

Props 3

Press "Try it" on a card to load that prop into the playground.

classNameNexera

string

Extra classes, merged last so they win over the defaults (for example a different size-* for the accuracy circle).

labelNexera

string

Text alternative (WCAG 1.1.1). The marker has no text of its own and is drawn in one blue, so this is what tells assistive technology what it is. Translate it. Not allowed on a decorative marker.

isDecorativeNexera

boolean

Hide the marker from assistive technology. Hide the marker (aria-hidden), because the user's location is stated as text next to the map.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

3 direct · 2 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.1Use of ColorLevel A · tested directly
1.4.11Non-text ContrastLevel AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<MapMarkerYou className="shadow-sm" />

Used in blocks

No block uses MapMarkerYou yet.

Theme studio

MapMarkerYou

Try every prop. Copy the code.

Examples 4

On map surfaces

Large accuracy

Decorative

Right to left

Props 3

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components