Reticle

Reticle is a small crosshair glyph. Use it as a decorative marker next to labels, in corners or on targets.

import { Reticle } from 'jarvis-react-ui';

Sizes

size sets width and height in pixels; the default is 12. The lines are 1px wide at every size.

import { Reticle } from 'jarvis-react-ui';

export default function Sizes() {
    return (
        <div className="flex items-center gap-6">
            <Reticle size={10} />
            <Reticle />
            <Reticle size={20} />
            <Reticle size={32} />
        </div>
    );
}

In a heading

The lines use currentColor and default to the accent color. Change it with a text color utility on className, e.g. text-text-muted.

import { Reticle } from 'jarvis-react-ui';

export default function InHeading() {
    return (
        <div className="flex items-center gap-2">
            <Reticle size={10} className="text-text-muted" />
            <span className="text-[10px] uppercase tracking-[2px] text-text-secondary">
                Target lock
            </span>
            <Reticle size={10} className="text-text-muted" />
        </div>
    );
}

Accessibility

• Reticle renders a <span role="presentation"> that is aria-hidden by default.
• If the crosshair carries meaning, set aria-hidden={false} and put the meaning into nearby text; the glyph itself has no accessible name.

API