index.mdx

title	Link
description	Display a hyperlink component
source	packages/raystack/components/link

import { playground, sizeDemo, variantDemo, styleDemo, weightDemo, } from "./demo.ts";

Anatomy

Import and assemble the component:

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

<Link />

API Reference

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

Examples

Variant

Choose from different variants.

Size

The Link component supports 10 different sizes.

Weight

Control the visual emphasis of links with different font weights.

Styles

Additional style variations including underlined and external links.

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
• Hover feedback uses an opacity transition