Link

Ported

Text link. Routing belongs to the app: pass href, or a router link through render. Native <a> attributes and ref pass through.

Kumo source

Thermal results are in the run report.

import { Text } from "@etched/monet/text";
import { Link } from "@etched/monet/link";

export function Preview() {
  return (
    <Text>
      Thermal results are in the <Link href="#link">run report</Link>.
    </Text>
  );
}

Installation

import { Link, LinkExternalIcon } from "@etched/monet/link";

Examples

Variants

inline link current link plain link

import { Link, type LinkVariant } from "@etched/monet/link";

const variants: LinkVariant[] = ["inline", "current", "plain"];

export function Variants() {
  return (
    <div className="row">
      {variants.map((v) => (
        <Link key={v} href="#link" variant={v}>
          {v} link
        </Link>
      ))}
    </div>
  );
}

In text

current takes the color of the text around it, for example in an error.

Thermal results are in the run report. Ask the bench owner before you start a retest.

Upload failed. See the log for details.

import { Text } from "@etched/monet/text";
import { Link } from "@etched/monet/link";

export function InText() {
  return (
    <div className="grid">
      <Text>
        Thermal results are in the <Link href="#link">run report</Link>. Ask the bench owner before you start a retest.
      </Text>
      <Text variant="error">
        Upload failed. <Link href="#link" variant="current">See the log</Link> for details.
      </Text>
    </div>
  );
}

External, router and badge links

Routing belongs to the app: give a router link to render.

Etched website Text section, through render View badges

import type { AnchorHTMLAttributes } from "react";
import { Badge } from "@etched/monet/badge";
import { Text } from "@etched/monet/text";
import { Link, LinkExternalIcon } from "@etched/monet/link";

// Stands in for a router's link component, such as React Router's or Next.js's.
function RouterLink({ to, ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { to: string }) {
  return <a href={to} data-router-link="" {...props} />;
}

export function ExternalRouterAndBadgeLinks() {
  return (
    <div className="row">
      <Link href="https://www.etched.com" target="_blank" rel="noopener noreferrer">
        Etched website <LinkExternalIcon />
      </Link>
      <Link render={<RouterLink to="#text" />}>Text section, through render</Link>
      <Link href="#badge" variant="plain">
        <Badge variant="outline">View badges</Badge>
      </Link>
    </div>
  );
}

Accessibility

A native a: with href, Enter follows it. Without href, it is not a link and the keyboard does not reach it.
A link named by its text. With render, the router's link gets the same class, props and children.
LinkExternalIcon is an image named "(opens in a new tab)", so the link's name ends with those words.
Use LinkExternalIcon with target="_blank". In running text, use inline or current: plain has no underline until hover.

API reference

Prop	Type	Default	Description
variant	"inline" \| "current" \| "plain"	"inline"
render	ReactElement<{ className?: string }>	–	Renders another element with the link's props, class and children, such as a router link: `render={<RouterLink to="/runs" />}`.