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

Prop	Type	Default
`href`	`string`	-
`variant`	`"primary" \| "secondary" \| "tertiary" \| "emphasis" \| "accent" \| "attention" \| "danger" \| "success"`	`"accent"`
`size`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10`	`2`
`weight`	`number \| "normal" \| "bold" \| "bolder"`	`400`
`underline`	`boolean`	-
`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="medium" align="end">
  <Link href="#" size={1}>
    Size 1
  </Link>
  <Link href="#" size={2}>
    Size 2
  </Link>
  <Link href="#" size={3}>
    Size 3
  </Link>
  <Link href="#" size={4}>
    Size 4
  </Link>
  <Link href="#" size={5}>
    Size 5
  </Link>
  <Link href="#" size={6}>
    Size 6
  </Link>
  <Link href="#" size={7}>
    Size 7
  </Link>
  <Link href="#" size={8}>
    Size 8
  </Link>
  <Link href="#" size={9}>
    Size 9
  </Link>
  <Link href="#" size={10}>
    Size 10
  </Link>
</Flex>

Weight

Control the visual emphasis of links with different font weights.

<Flex gap="medium" align="end">
  <Link href="#" weight="normal">
    Normal Weight
  </Link>
  <Link href="#" weight="bold">
    Bold Weight
  </Link>
  <Link href="#" weight={500}>
    Weight 500
  </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="/file.pdf" 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

Link

On this page