CoordLabel

"use client";import { CoordLabel } from "@/registry/okibi/ui/coord-label";export default function CoordLabelDemo() {  return (    <div className="flex flex-wrap items-center justify-center gap-4">      <CoordLabel bracket>03</CoordLabel>      <CoordLabel>SEC // 0x4A2</CoordLabel>      <CoordLabel bracket>THREAT 02 :: TRACE 12%</CoordLabel>    </div>  );}

Installation

Usage

import { CoordLabel } from "@/components/ui/coord-label"

<CoordLabel bracket>0x4A2</CoordLabel>

Examples

Bracketed

bracket wraps the label in [ … ] reticle brackets for a coordinate / index marker.

import { CoordLabel } from "@/registry/okibi/ui/coord-label";export default function BracketDemo() {  return (    <div className="flex flex-wrap items-center justify-center gap-4">      <CoordLabel>SEC // 0x4A2</CoordLabel>      <CoordLabel bracket>SEC // 0x4A2</CoordLabel>    </div>  );}

API Reference

CoordLabel

Accessibility

• The label is plain mono text, announced inline in reading order — give it a semantic element via as (e.g. 'dt') when the surrounding structure calls for one.
• When bracket is set, the [ and ] reticles are aria-hidden and select-none, so assistive tech and copy/paste get the clean value, not the brackets.
• Used as pure decoration (a HUD coordinate with no informational role), mark the wrapper aria-hidden so it is not read — never let it be the only place essential meaning lives.
• Default text-muted-foreground meets AA at this small size; if you recolor it via className, use a *-spark token rather than a bare accent so contrast holds.

Guidelines

Do

• Use it for tiny mono index / coordinate annotations — the HUD's connective tissue between larger elements.
• Turn on bracket for the targeting-reticle [ … ] framing when you want that overlay feel.
• Set as to the right semantic element when the label is structural, not just decorative.

Don't

• Do not pour body copy into it — it is wide-tracked, uppercase micro-text, sized for short codes.
• Do not override the color with a bare accent that drops this small text below the contrast bar.