Link

Navigation, inside text or on its own. For an action, use a Button; for a link that looks like a button, use .hbutton on the <a>.

Installation

bun add @harmo-ui/css @harmo-ui/react

npm install @harmo-ui/css @harmo-ui/react

pnpm add @harmo-ui/css @harmo-ui/react

yarn add @harmo-ui/css @harmo-ui/react

bunx harmo-ui add link

npx harmo-ui add link

pnpm dlx harmo-ui add link

yarn dlx harmo-ui add link

Usage

import { Link } from "@harmo-ui/react";

<Link href="/settings">Settings</Link>

Examples

This site is using your theme

Standalone

On its own, a link needs no underline: its color and place set it apart. It takes the font of the text around it.

Settings All campaigns Help center

<>
  <Link href="/settings">Settings</Link>
  <Link href="/campaigns">All campaigns</Link>
  <Link href="/help">Help center</Link>
</>

<a class="hlink" href="/settings">Settings</a>
<a class="hlink" href="/campaigns">All campaigns</a>
<a class="hlink" href="/help">Help center</a>

In running text

Inside a sentence, color is the only cue, and the link purple is 2.03:1 against body text, short of WCAG 1.4.1. data-underlined adds the underline that tells a link apart.

Contacts who unsubscribe stop receiving campaigns. Read the unsubscribe policy for the details.

<p>
  Contacts who unsubscribe stop receiving campaigns. Read the{" "}
  <Link underlined href="/help/unsubscribes">
    unsubscribe policy
  </Link>{" "}
  for the details.
</p>

<p>
  Contacts who unsubscribe stop receiving campaigns. Read the
  <a class="hlink" data-underlined href="/help/unsubscribes">unsubscribe policy</a>
  for the details.
</p>

Visited

data-visited turns a link dark purple once its page is in the browser's history. Both links carry it; the first stands in for a page you have opened.

Getting started Release notes

<>
  <Link visited href="/help/getting-started">
    Getting started
  </Link>
  <Link visited href="/release-notes">
    Release notes
  </Link>
</>

<a class="hlink" data-visited href="/help/getting-started">Getting started</a>
<a class="hlink" data-visited href="/release-notes">Release notes</a>

With an icon

A .hicon child lines the icon up with the text, --harmo-icon-gap apart. Put icons after the text: the link keeps the text's baseline, so an icon first would sit slightly high. A ChevronToArrow turns into an arrow on hover or keyboard focus.

Settings All reports

<>
  <Link href="/settings">
    Settings
    <Chevron />
  </Link>
  <Link href="/reports">
    All reports
    <ChevronToArrow />
  </Link>
</>

<a class="hlink" href="/settings">
  Settings
  <svg class="hicon hchevron" width="1.125em" height="1.125em" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
    <path
      d="M8.79048 5C8.58956 5 8.38863 5.07186 8.23001 5.22585C7.92333 5.52355 7.92333 6.01631 8.23001 6.31402L14.0886 12.0013L8.23001 17.6885C7.92333 17.9863 7.92333 18.479 8.23001 18.7767C8.53668 19.0744 9.04428 19.0744 9.35096 18.7767L15.77 12.5454C16.0767 12.2477 16.0767 11.7549 15.77 11.4572L9.35096 5.22585C9.19233 5.07186 8.99141 5 8.79048 5Z"
      fill="currentColor"
    />
  </svg>
</a>
<a class="hlink" href="/reports">
  All reports
  <svg class="hicon hchevron-to-arrow" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <g class="hchevron-to-arrow-head">
      <line class="hchevron-to-arrow-upper" x1="12" y1="6" x2="12" y2="12" />
      <line class="hchevron-to-arrow-lower" x1="12" y1="18" x2="12" y2="12" />
    </g>
    <line class="hchevron-to-arrow-shaft" x1="6" y1="12" x2="15" y2="12" />
  </svg>
</a>

Right to left

The same links in Arabic. The ChevronToArrow follows the reading direction and points left.

الإعدادات كل التقارير

<>
  <Link href="/settings">الإعدادات</Link>
  <Link href="/reports">
    كل التقارير
    <ChevronToArrow />
  </Link>
</>

<a class="hlink" href="/settings">الإعدادات</a>
<a class="hlink" href="/reports">
  كل التقارير
  <svg class="hicon hchevron-to-arrow" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <g class="hchevron-to-arrow-head">
      <line class="hchevron-to-arrow-upper" x1="12" y1="6" x2="12" y2="12" />
      <line class="hchevron-to-arrow-lower" x1="12" y1="18" x2="12" y2="12" />
    </g>
    <line class="hchevron-to-arrow-shaft" x1="6" y1="12" x2="15" y2="12" />
  </svg>
</a>

Long text

In a narrow container, drawn dashed here, an icon link wraps its text and keeps the icon beside it.

Set up your first automated campaign

<Link href="/help/automations">
  Set up your first automated campaign
  <ChevronToArrow />
</Link>

<a class="hlink" href="/help/automations">
  Set up your first automated campaign
  <svg class="hicon hchevron-to-arrow" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <g class="hchevron-to-arrow-head">
      <line class="hchevron-to-arrow-upper" x1="12" y1="6" x2="12" y2="12" />
      <line class="hchevron-to-arrow-lower" x1="12" y1="18" x2="12" y2="12" />
    </g>
    <line class="hchevron-to-arrow-shaft" x1="6" y1="12" x2="15" y2="12" />
  </svg>
</a>

API reference

React

<Link> renders the link, through HarmoProvider's linkComponent (an <a> by default). Put an icon after the text, as a child. Other props are the link's attributes; href is required.

Prop	Effect
`underlined`	Adds the underline, for a link in running text
`visited`	Turns it dark purple once its page is in the browser's history

HTML

An <a class="hlink" href="…">, with an optional direct .hicon after the text. Load link.css; chevron.css or chevron-to-arrow.css for an icon. It needs no script.

Hook	Effect
A direct `.hicon`	`inline-flex`, with `--harmo-icon-gap` (6px) between the text and the icon
`data-underlined`	Underlined, 0.2em below the text, for links in running text; off by default
`data-visited`	Visited links turn `--harmo-link-visited-color-text` (dark purple), without a color transition; off by default

See Link's full contract.

Accessibility

Links with an icon and breadcrumb links are identifiable without an underline, but inside a sentence color is the only cue, and purple is 2.03:1 against body text: below what WCAG 1.4.1 asks (an underline, or 3:1 plus a hover cue). Put data-underlined on links in running text to meet it; standalone and icon links can stay ununderlined. Visited links look unvisited unless the link carries data-visited.