Components

Link

A styled anchor element for navigation. Supports multiple colors, underline modes, sizes, and an external link indicator with an arrow icon.

Installation

npm install @trinkui/react

Import

import { Link } from "@trinkui/react";

Usage

A basic link with primary color. Click the link to see the counter increment.

Read the documentation to learn more about TrinkUI components.

<p>
  Read the <Link href="/docs">documentation</Link> to learn more.
</p>

Colors

Toggle between color variants to see how the link appearance changes.

Visit our website Contact support View pricing

<Link color="primary" href="/website">Visit our website</Link>
<Link color="secondary" href="/support">Contact support</Link>
<Link color="foreground" href="/pricing">View pricing</Link>

Underline Modes

Control the underline behavior: never, on hover, or always visible.

Check our terms of service and privacy policy before proceeding.

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

External Link

Set isExternal and showAnchorIcon to indicate links that open in a new tab.

GitHub React Documentation Tailwind CSS

<Link href="https://github.com" isExternal showAnchorIcon>
  GitHub
</Link>
<Link href="https://react.dev" isExternal showAnchorIcon color="secondary">
  React Documentation
</Link>

Sizes

Available in three sizes.

Small link External link Underlined link

<Link size="sm">Small link</Link>
<Link size="md">Medium link</Link>
<Link size="lg">Large link</Link>

Props

Prop	Type	Default	Description
href	string	--	URL to navigate to
color	"primary" \| "secondary" \| "foreground"	"primary"	Color of the link text
size	"sm" \| "md" \| "lg"	"md"	Size of the link text
underline	"none" \| "hover" \| "always"	"none"	When to show the underline
isExternal	boolean	false	Opens link in a new tab with noopener noreferrer
showAnchorIcon	boolean	false	Show an external link arrow icon after the text

Accessibility

Uses the semantic <a> element for proper keyboard and screen reader support.
External links include rel="noopener noreferrer" for security and target="_blank".
Focus ring is visible when navigating with keyboard via focus-visible:ring-2.
The anchor icon provides a visual cue that the link opens in a new window.
Underline modes ensure links are identifiable even without color perception.

← Kbd Listbox →