Skip to main content
The Link component provides styled anchor elements that inherit from the Text component, with built-in support for external links and downloads.

​
Basic usage

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

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

​
Props

​
href
string
required
The URL the link points to.
​
variant
'primary' | 'secondary' | 'tertiary' | 'emphasis' | 'accent' | 'attention' | 'danger' | 'success'
default:"'accent'"
Visual style variant inherited from Text component.
​
size
'micro' | 'mini' | 'small' | 'regular' | 'large' | 1-10
default:"'small'"
Text size inherited from Text component.
​
external
boolean
Whether the link opens in a new tab. Automatically adds target="_blank" and rel="noopener noreferrer".
​
download
boolean | string
Whether the link triggers a download. Pass a string to specify the download filename.
​
className
string
Additional CSS classes to apply.
​
children
ReactNode
The link text content.

​
External links

Links that open in a new tab with proper security attributes. 
import { Link } from '@raystack/apsara';

function ExternalLink() {
  return (
    <Link href="https://example.com" external>
      Visit Example.com
    </Link>
  );
}
The external prop automatically adds:
  • target="_blank" to open in a new tab
  • rel="noopener noreferrer" for security
  • Accessible aria-label indicating it opens in a new tab

​
Download links

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>
    </>
  );
}

​
Variants

Inherit all Text component variants for different semantic meanings. 
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>
  );
}

​
Sizes

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>
  );
}

​
In text content

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

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

​
Navigation menu

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>
  );
}

​
Footer links

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>
  );
}

​
With router libraries

Use with Next.js Link or React Router. 
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>
  );
}

​
Accessibility

  • Uses semantic <a> element for proper navigation
  • External links include descriptive aria-labels
  • Download links include accessible labels
  • Maintains proper focus states for keyboard navigation
  • Ensure link text is descriptive and indicates the destination

​
Related components

  • Text - Link inherits all Text component props and styling
  • Button - For primary actions instead of navigation