Link

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Link } from "@tessinaui/ui";

<Link href="/docs">Read the documentation</Link>

<Link variant="standalone" trailingIcon={<ArrowRight />} href="/pricing">
  See pricing
</Link>

<Link external href="https://tessinaui.com">Tessina UI</Link>

Examples

Default

A basic inline link with the default brand color and always-on underline.

Variants

Three style personalities — inline, standalone, and quiet — each with sensible underline defaults.

Sizes

Five sizes from xs to xl that mirror Button and Field for consistent alignment.

Intents

Use intent to colour a link by meaning — error, warning, success, or info.

Tones

tone sets the base colour: default, muted, or on-color for dark surfaces.

External links

Pass external to open in a new tab with rel="noopener noreferrer" and an auto external icon.

Variants

Each variant sets a sensible underline default. You can override it explicitly with underline="always" \| "hover" \| "none" at any time.

Sizes

Mirrors Button and Field sizing so links line up with adjacent UI.

Intents

Use intent to communicate meaning via colour. Any non-none intent overrides the tone choice for the default/muted tones; on-color intents stay tinted for dark surfaces.

Tones

Underline

underline is orthogonal to variant — each variant has a sensible default, but you can pin the behaviour explicitly.

<Link underline="always">Always underlined</Link>
<Link underline="hover">Underline on hover</Link>
<Link underline="none">Never underlined</Link>

External links

Pass external to flag a link as external. Tessina Link then:

• sets target="_blank" (unless you pass an explicit target)
• sets rel="noopener noreferrer" (unless you pass an explicit rel)
• appends an ExternalLink trailing icon

Turn the icon off with showExternalIcon={false}.

<Link external href="https://tessinaui.com">
  Tessina UI
</Link>

<Link external showExternalIcon={false} href="https://tessinaui.com">
  Tessina UI
</Link>

Icons

<Link variant="standalone" leadingIcon={<ArrowLeft />} href="/projects">
  Back to projects
</Link>

<Link variant="standalone" trailingIcon={<ArrowRight />} href="/pricing">
  See pricing
</Link>

Icons are wrapped in an aria-hidden span and sized by size. A custom trailingIcon overrides the auto external icon.

Disabled

<Link disabled href="/billing">
  Billing portal
</Link>

disabled visually mutes the link, sets aria-disabled="true", removes it from the tab order via tabIndex={-1}, and strips the href so it can't be navigated.

Integrating with Next.js / React Router

Use the render prop to inherit Tessina Link styling while preserving your router's navigation semantics.

import NextLink from "next/link";

<Link render={<NextLink href="/dashboard" />}>Dashboard</Link>

import { NavLink } from "react-router-dom";

<Link render={<NavLink to="/dashboard" />}>Dashboard</Link>

RTL

Pass dir="rtl" to flip icon order and spacing via logical-flow properties.

<Link dir="rtl" variant="standalone" leadingIcon={<ArrowLeft />} href="#">
  عودة إلى المشاريع
</Link>

Accessibility

• Renders a native <a> element with the correct role, focus ring, and keyboard behaviour.
• External links get rel="noopener noreferrer" automatically.
• Disabled links set aria-disabled="true" and are removed from the tab order.
• Keep link labels descriptive — "Read the full post" beats "click here".
• When a link looks like a button, consider using Button with render={<a href="..." />} instead — buttons and links have different semantics.

API Reference

Link

The component extends all standard <a> HTML attributes.