Link

Navigation

A styled anchor element for navigation. Use links for inline navigation, external references, or any clickable text that navigates to another page.

Import

import { Link } from "@/components/ui/link";

Different link styles for various contexts

Links in different text sizes

Links to external websites with icon indicator

Links used within paragraph text

For more information about our products, visit the product catalog or check out our main website.

href*—

string

The URL to navigate to

variant"default"

"default" | "primary" | "muted" | "subtle" | "nav"

Visual style of the link

size"md"

"sm" | "md" | "lg"

Text size of the link

external—

boolean

Force external link behavior

showExternalIcontrue

boolean

Show external link icon for external URLs

Prop	Type	Default	Description
`href*`	`string`	—	The URL to navigate to
`variant`	`"default" \| "primary" \| "muted" \| "subtle" \| "nav"`	"default"	Visual style of the link
`size`	`"sm" \| "md" \| "lg"`	"md"	Text size of the link
`external`	`boolean`	—	Force external link behavior
`showExternalIcon`	`boolean`	true	Show external link icon for external URLs