Coordinate Tag
A pill that renders a latitude/longitude pair with a pin icon. Used wherever raw coordinates need to be visible — report cards, detail pages, admin verification queue — but should read as metadata, never as a primary identifier.
Preview — In a Report Card
Partial
Synced
Al-Rashid Primary School
East wing collapsed, classrooms 3–6 destroyed.
Preview — In a Detail Page Metadata Row
Infrastructure
School
Coordinates
Submitted
Sizes
md (default) — cards, standalone
sm — table rows, dense lists
Variants
| Variant | Usage |
|---|---|
| default | Standard contexts — cards, detail pages, admin tables. |
| subtle | When the tag must visually recede further (already inside a coloured surface). |
| inverse | On dark or coloured backgrounds (e.g. inside a hero banner). |
Precision
precision=2 (~1.1 km)
precision=4 — default (~11 m)
precision=6 (~11 cm) — analyst tools
Default precision (4) is intentionally coarse on user-facing surfaces — exact coordinates can identify a household. Use 6 only in authenticated analyst views.
Empty State
Renders an em-dash placeholder when no coordinates are available.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| lat | float|null | null | Latitude. Falsy/non-numeric values render the empty state. |
| lng | float|null | null | Longitude. |
| precision | int | 4 | Decimal places shown. |
| size | 'sm'|'md' | 'md' | Pill density. |
| variant | 'default'|'subtle'|'inverse' | 'default' | Visual treatment. |
| label | string|null | null | Override aria-label/tooltip text. Defaults to a translatable phrase. |
Accessibility
- Wrapped in
role="img"with anaria-labellike "Coordinates: latitude 31.77, longitude 35.21" — screen readers don't try to spell out the comma-separated numbers. - The visible text is
aria-hiddenso it isn't read twice. - Pin icon is decorative (
aria-hiddenvia the icon atom). tabular-nums+font-monokeep numbers from jumping when values change.
Trauma-Informed Design
- Coordinates are not the primary identifier. The building name (or short description) leads; the tag is supporting metadata.
- Default 4-decimal precision is roughly 11 m — accurate enough to find the structure, coarse enough to avoid pinpointing a specific dwelling on public surfaces.
- Muted slate palette so the tag doesn't compete with damage badges or sync states for attention.
- The pin icon establishes "this is a place" without needing the user to parse seven decimal digits to figure out what they're looking at.