Link

Text that goes to another page.

SourcePackage @kerf-js/veneerTry it

Preview

tsx

import { Link, Text } from '@kerf-js/veneer'export function InText() {  return (  <Text>    Roll back from the{' '}    <Link href="/components/table">deploys table</Link>.    Traffic moves in about ten seconds.  </Text>  )}

Installation

npm install @kerf-js/veneer

Try it

Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.

Live preview

Controls

Label

Subtle

External

Codeupdates as you change the controls

import { Link } from '@kerf-js/veneer'<Link href="/components/button">Read the guide</Link>

Usage

tsx

import { Link } from '@kerf-js/veneer'<Link href="/components/button">Read the guide</Link>

Subtle

subtle takes the colour of the text around it.

tsx

import { Link, Text } from '@kerf-js/veneer'export function Subtle() {  return (  <Text subtle>    Questions?{' '}    <Link      subtle      href="/components"    >      Read the guide    </Link>{' '}    or ask your team's owner.  </Text>  )}

External

external opens a new tab, and tells screen readers it will.

tsx

import { Link } from '@kerf-js/veneer'export function External() {  return (  <Link    external    href="https://example.com"  >    Open the status page  </Link>  )}

The next step on a card

A Link inside a card points to the next step.

tsx

import { Card, Link, Text } from '@kerf-js/veneer'export function CardAction() {  return (  <Card    eyebrow="Failed"    title="mobile-bff deploy d-4819"  >    <Text subtle>      Retry timed out upstream calls, by Sam Okafor.    </Text>    <Link href="/components/alert">      {'See what went wrong'}    </Link>  </Card>  )}

Footer links

Use subtle for quiet links and external for ones that leave the site.

tsx

import { Link, Row } from '@kerf-js/veneer'export function Footer() {  return (  <Row    gap="group"    justify="center"  >    <Link      subtle      href="/learn"    >      Learn    </Link>    <Link      subtle      href="/components"    >      Components    </Link>    <Link      subtle      external      href="https://example.com"    >      Status    </Link>  </Row>  )}

When to use

Use it for

The press takes people somewhere else

Reach for something else

Button, when the press changes something here
Nav, when it is one of a set of page links

Accessibility

Enter: Follows the link

Write link text that makes sense alone: "Read the guide", not "click here".

Theming

Restyle it app-wide from veneer() in your kerf config. Every key takes colour, spacing, size, radius, shadow, type and motion; its own keys are listed. A state nests inside: hover: { bg: 'ink' }. Text on a fill you set is contrast-checked at build. How theming works

Key	Own keys	States
`parts.link`	—	hover, focus, press, active, open, disabled
`parts.link.underline`	color, width, offset	hover, focus

veneer({  colors: { brand: '#e8590c', ink: '#1b1b1f' },  parts: {    link: { text: 'brand', underline: { color: 'brand', width: 2, hover: { width: 3 } } },  },})

API Reference

Prop	Type	Default	Description
`children`	`unknown`	—	What it contains.
`href`	`string`	—	Where it goes.
`subtle`	`boolean`	`false`	Takes the surrounding text colour.
`external`	`boolean`	`false`	Opens in a new tab with `rel="noopener noreferrer"`, and says so to screen readers.

RelatedButton Nav