LinkDisplay a hyperlink component

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

Install the component from your command line.

npm install @raystack/apsara

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

<Link href="#" variant="accent">
  Accent Link
</Link>

The Link component accepts the following props:

href: The URL that the link points to (required)
variant: Visual style variant ("primary" | "secondary" | "tertiary" | "emphasis" | "accent" | "attention" | "danger" | "success", default: "accent")
size: Text size (1-10, default: 2)
weight: Font weight ("normal" | "bold" | "bolder" | number, default: 400)
underline: Boolean to show underline decoration
external: Boolean to open link in new tab
download: Boolean or string for downloadable links
className: Additional CSS class names

Choose from different variants.

The Link component supports 10 different sizes.

Control the visual emphasis of links with different font weights.

Additional style variations including underlined and external links.

The Link component follows accessibility best practices: