Link

Usage

The Link component provides a way to navigate between pages or sections.

import { Link } from "@raystack/apsara/v1";
 
<Link href="#" variant="accent">
  Accent Link
</Link>;

Link Props

The Link is built over Text and accepts all it's props

Prop	Type	Default
`href`	`string`	-
`external`	`boolean`	-
`download`	`string \| boolean`	-
`className`	`string`	-

Examples

Variant

Choose from different variants.

<Flex gap="medium" align="center">
  <Link href="#" variant="primary">
    Primary Link
  </Link>
  <Link href="#" variant="secondary">
    Secondary Link
  </Link>
  <Link href="#" variant="tertiary">
    Tertiary Link
  </Link>
  <Link href="#" variant="accent">
    Accent Link
  </Link>
  <Link href="#" variant="attention">
    Attention Link
  </Link>
  <Link href="#" variant="danger">
    Danger Link
  </Link>
  <Link href="#" variant="success">
    Success Link
  </Link>
</Flex>

Size

The Link component supports 10 different sizes.

<Flex gap="large" align="center">
  <Link href="#" size="micro">
    This is a text
  </Link>
  <Link href="#" size="mini">
    This is a text
  </Link>
  <Link href="#" size="small">
    This is a text
  </Link>
  <Link href="#" size="regular">
    This is a text
  </Link>
  <Link href="#" size="large">
    This is a text
  </Link>
</Flex>

Weight

Control the visual emphasis of links with different font weights.

<Flex gap="large" align="center">
  <Link href="#" weight="regular">
    This is a text
  </Link>
  <Link href="#" weight="medium">
    This is a text
  </Link>
</Flex>

Styles

Additional style variations including underlined and external links.

<Flex gap="medium" align="end">
  <Link href="#" variant="primary" underline>
    Underlined Link
  </Link>
  <Link href="https://example.com" external>
    External Link
  </Link>
  <Link href="/assets/logo.svg" download>
    Download File
  </Link>
</Flex>

Accessibility

The Link component follows accessibility best practices:

Uses native <a> elements with proper role="link"
External links include target="_blank" and rel="noopener noreferrer"
External links have aria-labels indicating they open in new tabs
Download links include appropriate aria-labels
Maintains color contrast ratios for all variants

LinknewNEW