Link

import { Link } from "@hel/ui/link"

export function LinkDemo() {

When to use it#

Use Link for any text that takes people to another page, in text or on its own: a record name in a table, a "view all" under a card, a reference in a paragraph. Use a Button when the action does something instead of going somewhere.

A Link is always a real a element with an href, so opening in a new tab, copying the address and server rendering all work the way people expect.

Import#

Copyimport { Link, LinkProvider } from "@hel/ui/link"

Colors#

variant picks the color.

• accent is the theme's link color, for links that should stand out. It is the default.
• primary is the main text color, for record names in a table or list, where many links sit together and blue would be loud.
• muted is for secondary links, such as footers and meta lines.
• inherit takes the color around it, for links inside an alert, a badge or colored text.

import { Link } from "@hel/ui/link"
import { Stack } from "@hel/ui/stack"
import { Text } from "@hel/ui/text"

Links inside text#

Inside a Text, the link takes the size of the text around it, so you do not need to set one. A link in a sentence should use underline="always", so it can be told apart without relying on color. Use weight="inherit" to keep the weight of the sentence.

import { Link } from "@hel/ui/link"
import { Stack } from "@hel/ui/stack"
import { Text } from "@hel/ui/text"

Size, weight and underline#

Other sites#

Set external for a link to another site. It opens in a new tab with rel="noopener noreferrer", shows a small arrow, and tells screen readers that it opens a new tab. The app's router is not used for it.

import { Link } from "@hel/ui/link"
import { Text } from "@hel/ui/text"

Routing#

By default, a click on a link goes through the browser, which loads the page again. To make links inside your app navigate without a reload, wrap the app in a LinkProvider once and give it your router's navigate function. Plain clicks on links to the same site then use it. Clicks that open a new tab, downloads and links to other sites are left to the browser.

Copy"use client"
 
import { useRouter } from "next/navigation"
import { LinkProvider } from "@hel/ui/link"
 
export function Links({ children }: { children: React.ReactNode }) {
  const router = useRouter()
  return <LinkProvider navigate={(path) => router.push(path)}>{children}</LinkProvider>
}

For a single link, pass your framework's own link to render instead. It does the navigation, and the provider is not used for that link.

Copyimport NextLink from "next/link"
 
<Link render={<NextLink href="/orders/12" />}>Order 12</Link>

Props#

It also takes the props of an a.

LinkProvider#