Link

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

The Link component provides styled anchor elements with variants for inline, subtle, and navigation links.

Usage

Basic Usage

Default Link Subtle Link Nav Link

Open Editor

import { Link } from "@paramanu/navigation-react"

export default function App() {
return (
  <>
    <Link href="#">Default Link</Link>
    <Link href="#" variant="subtle">Subtle Link</Link>
    <Link href="#" variant="nav">Nav Link</Link>
  </>
)
}

<a href="#" class="pm-link pm-link--default">Default Link</a>
<a href="#" class="pm-link pm-link--subtle">Subtle Link</a>
<a href="#" class="pm-link pm-link--nav">Nav Link</a>

External Link

External

Open Editor

import { Link } from "@paramanu/navigation-react"

export default function App() {
return <Link href="https://example.com" external>External</Link>
}

<a href="https://example.com" class="pm-link pm-link--default pm-link--external" target="_blank" rel="noopener noreferrer">External</a>

Guidelines

Accessibility

• External links get target="_blank" and rel="noopener noreferrer".
• Disabled links use aria-disabled="true" and tabIndex={-1}.
• Active links use aria-current="page".

API

Link Props

Prop	Type	Default	Description
variant	"default" | "subtle" | "nav"	"default"	Visual variant
active	boolean	false	Current page
disabled	boolean	false	Disabled state
external	boolean	false	External URL
underline	"auto" | "always" | "hover" | "never"	"auto"	Underline style

CSS Classes

Class	Description
pm-link	Root element
pm-link--subtle	Subtle variant
pm-link--nav	Navigation variant
pm-link--active	Active state
pm-link--disabled	Disabled state
pm-link--external	External link