Link

import { Link } from '@raystack/apsara';

function Navigation() {
  return <Link href="/about">About Us</Link>;
}

import { Link } from '@raystack/apsara';

function ExternalLink() {
  return (
    <Link href="https://example.com" external>
      Visit Example.com
    </Link>
  );
}

import { Link } from '@raystack/apsara';

function DownloadLink() {
  return (
    <>
      {/* Simple download */}
      <Link href="/files/document.pdf" download>
        Download PDF
      </Link>
      
      {/* With custom filename */}
      <Link href="/files/report.pdf" download="2024-annual-report.pdf">
        Download Report
      </Link>
    </>
  );
}

import { Link } from '@raystack/apsara';

function LinkVariants() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Link href="#" variant="accent">Accent Link (default)</Link>
      <Link href="#" variant="primary">Primary Link</Link>
      <Link href="#" variant="secondary">Secondary Link</Link>
      <Link href="#" variant="danger">Danger Link</Link>
      <Link href="#" variant="success">Success Link</Link>
    </div>
  );
}

import { Link } from '@raystack/apsara';

function LinkSizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Link href="#" size="micro">Micro Link</Link>
      <Link href="#" size="mini">Mini Link</Link>
      <Link href="#" size="small">Small Link (default)</Link>
      <Link href="#" size="regular">Regular Link</Link>
      <Link href="#" size="large">Large Link</Link>
    </div>
  );
}

import { Link, Text } from '@raystack/apsara';

function InlineLink() {
  return (
    <Text>
      Read our <Link href="/privacy">privacy policy</Link> for more information.
    </Text>
  );
}

import { Link } from '@raystack/apsara';

function NavigationMenu() {
  return (
    <nav>
      <ul style={{ display: 'flex', gap: '24px', listStyle: 'none' }}>
        <li><Link href="/">Home</Link></li>
        <li><Link href="/products">Products</Link></li>
        <li><Link href="/about">About</Link></li>
        <li><Link href="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

import { Link } from '@raystack/apsara';

function FooterLinks() {
  return (
    <footer>
      <div style={{ display: 'flex', gap: '16px' }}>
        <Link href="/terms" variant="secondary" size="small">
          Terms
        </Link>
        <Link href="/privacy" variant="secondary" size="small">
          Privacy
        </Link>
        <Link href="https://twitter.com" external variant="secondary" size="small">
          Twitter
        </Link>
      </div>
    </footer>
  );
}

import NextLink from 'next/link';
import { Link as ApsaraLink } from '@raystack/apsara';

function NextJsLink() {
  // Wrap or compose with your router's Link component
  return (
    <NextLink href="/dashboard" passHref legacyBehavior>
      <ApsaraLink>Dashboard</ApsaraLink>
    </NextLink>
  );
}