Link

import { Link } from "@fanvue/ui";
import type { LinkProps, LinkSize, LinkVariant } from "@fanvue/ui";

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

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

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

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

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

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

import { Link, WalletIcon } from "@fanvue/ui";

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

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>