Link

Text that goes to another page.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { Link, Text } from '@weft-js/warp'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 @weft-js/warp

Usage

tsx

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

Subtle

subtle takes the colour of the text around it.

tsx

import { Link, Text } from '@weft-js/warp'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 '@weft-js/warp'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 '@weft-js/warp'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 '@weft-js/warp'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>  )}type Status = 'Live' | 'Building' | 'Failed' | 'Paused'

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

Playground

Label

Subtle

External

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

Accessibility

Enter: Follows the link

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

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