Link

Navigates to another page or location. For actions that don’t navigate, use Button; for a link that looks like a button, use ButtonLink.

Links use semantic.typography.primary like Text, so they match the text around them in UI and in long-form content (data-text-context="prose").

import {Link, Text} from '@earendil-works/elanor-react';

export default function LinkDemo() {
  return (
    <Text>
      Read the <Link href="#">onboarding guide</Link> before your first project.
    </Text>
  );
}

import {Link} from '@earendil-works/elanor-react';

<Link href="/guides/onboarding">Onboarding guide</Link>;

Write link text that makes sense out of context; avoid “click here”.

Open a new tab only when leaving would interrupt a task. Say so in the link text and set rel="noreferrer".

import {Link} from '@earendil-works/elanor-react';

export default function LinkExternal() {
  return (
    <Link href="https://example.com/status" target="_blank" rel="noreferrer">
      Service status (opens in a new tab)
    </Link>
  );
}

Renders <a>. Accepts its HTML attributes and ref.