Link

Display a hyperlink component

Usage

1import { Link } from "@raystack/apsara";

Link Props

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

Prop

Type

Examples

Variant

Choose from different variants.

1<Flex gap="medium" align="center">
2  <Link href="#" variant="primary">
3    Primary Link
4  </Link>
5  <Link href="#" variant="secondary">
6    Secondary Link
7  </Link>
8  <Link href="#" variant="tertiary">
9    Tertiary Link
10  </Link>
11  <Link href="#" variant="accent">
12    Accent Link
13  </Link>
14  <Link href="#" variant="attention">
15    Attention Link
16  </Link>
17  <Link href="#" variant="danger">
18    Danger Link
19  </Link>
20  <Link href="#" variant="success">
21    Success Link
22  </Link>
23</Flex>

Size

The Link component supports 10 different sizes.

1<Flex gap="large" align="center">
2  <Link href="#" size="micro">
3    This is a text
4  </Link>
5  <Link href="#" size="mini">
6    This is a text
7  </Link>
8  <Link href="#" size="small">
9    This is a text
10  </Link>
11  <Link href="#" size="regular">
12    This is a text
13  </Link>
14  <Link href="#" size="large">
15    This is a text
16  </Link>
17</Flex>

Weight

Control the visual emphasis of links with different font weights.

1<Flex gap="large" align="center">
2  <Link href="#" weight="regular">
3    This is a text
4  </Link>
5  <Link href="#" weight="medium">
6    This is a text
7  </Link>
8</Flex>

Styles

Additional style variations including underlined and external links.

1<Flex gap="medium" align="end">
2  <Link href="#" variant="primary" underline>
3    Underlined Link
4  </Link>
5  <Link href="https://example.com" external>
6    External Link
7  </Link>
8  <Link href="/assets/logo.svg" download>
9    Download File
10  </Link>
11</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