> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Link

> An inline text link for navigating to a related page or section without using a button.

```tsx theme={null}
import { Link } from "@fanvue/ui";
import type { LinkProps, LinkSize, LinkVariant } from "@fanvue/ui";
```

## Examples

## Primary

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-link--primary&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Link — Primary" />
</Frame>

```tsx theme={null}
import { Link } from "@fanvue/ui";

<Link href="#" variant="primary">CTA</Link>
```

## Disabled

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-link--disabled&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Link — Disabled" />
</Frame>

```tsx theme={null}
import { Link } from "@fanvue/ui";

<Link href="#" disabled>CTA</Link>
```

## Small

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-link--small&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Link — Small" />
</Frame>

```tsx theme={null}
import { Link } from "@fanvue/ui";

<Link href="#" size="14">CTA</Link>
```

## Left Icon

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-link--left-icon&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Link — Left Icon" />
</Frame>

```tsx theme={null}
import { Link, WalletIcon } from "@fanvue/ui";

<Link href="#" leftIcon={<WalletIcon />}>CTA</Link>
```

## All Variants

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-link--all-variants&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="200" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Link — All Variants" />
</Frame>

```tsx theme={null}
import { ArrowUpRightIcon, Link } from "@fanvue/ui";

<div className="flex flex-col gap-6">
  {(["16", "14"] as const).map((size) => (
    <div key={size} className="flex flex-col gap-3">
      <span className="typography-description-12px-semibold text-content-tertiary">
        {size}px
      </span>
      <div className="flex flex-wrap items-center gap-6">
        <Link href="#" variant="primary" size={size}>
          Primary
        </Link>
        <Link href="#" variant="brand" size={size}>
          Brand
        </Link>
        <Link href="#" variant="primary" size={size} rightIcon={<ArrowUpRightIcon />}>
          With icon
        </Link>
        <Link href="#" variant="primary" size={size} disabled>
          Disabled
        </Link>
      </div>
    </div>
  ))}
</div>
```

## Props

## Link

An inline text link for navigating to a related page or section without using a button. Use `primary` for standard navigation and `brand` for the Fanvue green accent on calls to action within content.

Renders an underlined `<a>` by default. Pass `asChild` to compose with a router link (e.g. Next.js `Link`). When rendering without a visible label, provide an `aria-label`.

<ParamField path="asChild" type="boolean" default="false">
  Merge props onto a child element instead of rendering an `<a>`.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  When `true`, greys the link out and blocks interaction.
</ParamField>

<ParamField path="leftIcon" type="ReactNode">
  Icon element displayed before the label.
</ParamField>

<ParamField path="rightIcon" type="ReactNode">
  Icon element displayed after the label.
</ParamField>

<ParamField path="size" type="&#x22;16&#x22; | &#x22;14&#x22;" default="16">
  Text size of the link in pixels.
</ParamField>

<ParamField path="variant" type="&#x22;brand&#x22; | &#x22;primary&#x22;" default="primary">
  Visual style variant of the link.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `LinkProps`, `LinkSize`, `LinkVariant`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)
