Link

Styled anchor element with variant styles and optional external link support.

Import

tsx

import { Link } from '@tac-ui/web';

Playground

Interactively configure the Link props below.

Visit Documentation

Variant

External

tsx

<Link href="#" variant="inline">
  Visit Documentation
</Link>

Inline

The default inline variant renders a colored underlined link. Use within body text to provide contextual navigation.

Read the full documentation for more details.

tsx

<p>
  Read the <Link href="#">full documentation</Link> for more details.
</p>

Plain

The plain variant shows no underline and uses the foreground color, switching to the accent color on hover. Use for navigation items or subtle links.

Go to settings

tsx

<Link href="#" variant="plain">Go to settings</Link>

Current

The current variant marks the active or current page link. It is styled in the accent color with medium weight and is not interactive (pointer-events-none).

tsx

<nav className="flex gap-4">
  <Link href="#" variant="plain">Home</Link>
  <Link href="#" variant="current">About</Link>
  <Link href="#" variant="plain">Contact</Link>
</nav>

External Link

Pass the external prop to open the link in a new tab. An external link icon is automatically appended to signal that the destination is outside the current site.

Visit Example.com

tsx

<Link href="https://example.com" external>
  Visit Example.com
</Link>

API Reference

Prop	Type	Default	Description
variant	"inline" \| "plain" \| "current"	"inline"	Visual style variant of the link.
external	boolean	false	When true, opens in a new tab and appends an external link icon.
href	string	-	The URL the link points to.
children	React.ReactNode	-	Link label content.
className	string	-	Additional CSS class names.