Link

A styled anchor for inline text links, secondary links and navigation. It can open external pages in a new tab and mark the current page in a navigation bar.

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

Variants

accent (the default) is the inline link with a dashed underline. muted is a quieter link for secondary content. nav is the uppercase style for navigation bars.

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

export default function Variants() {
    return (
        <p className="text-[11px] text-text-secondary">
            Read the <Link href="#api">API reference</Link> or the{' '}
            <Link href="#accessibility" variant="muted">
                accessibility notes
            </Link>
            .
        </p>
    );
}

External

external opens the link in a new tab with rel="noopener noreferrer" and appends an external-link icon.

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

export default function External() {
    return (
        <Link href="https://github.com/JoeyAsh/jarvis_ui_lib" external>
            Source on GitHub
        </Link>
    );
}

Navigation

Use variant="nav" with active on the link of the current page. With a client-side router, call event.preventDefault() in onClick and navigate yourself, or wrap your router's link component.

import { useState } from 'react';
import { Link } from 'jarvis-react-ui';

const SECTIONS = ['Overview', 'Systems', 'Telemetry'];

export default function Navigation() {
    const [current, setCurrent] = useState('Overview');

    return (
        <nav aria-label="Sections" className="flex items-center gap-5">
            {SECTIONS.map((section) => (
                <Link
                    key={section}
                    href={`#${section.toLowerCase()}`}
                    variant="nav"
                    active={section === current}
                    onClick={(e) => {
                        e.preventDefault();
                        setCurrent(section);
                    }}
                >
                    {section}
                </Link>
            ))}
        </nav>
    );
}

Sound

Hovering plays hover_button and clicking plays click through the nearest SfxProvider. See Sound effects.

Accessibility

• Renders a native <a>, so it is focusable and activates with Enter. Always pass an href.
• active sets aria-current="page".
• The external-link icon is aria-hidden. If the link text does not make clear that it opens a new tab, say so in the text.
• The focus outline is visible on keyboard focus only (focus-visible).

API

Also accepts inherited props from AnchorHTMLAttributes (8), HTMLAttributes (54), AriaAttributes (53), DOMAttributes (169), RefAttributes (1), Attributes (1).