Link

Alpha

An accessible anchor component with external link handling, underline variants, and automatic security attributes for target='_blank'.

Import

import { Link } from "@compa11y/react";

Usage

Example.tsx

import { Link } from "@compa11y/react";

function Example() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
      <Link href="/docs">Documentation</Link>
      <Link href="https://github.com" external>GitHub</Link>
      <Link href="/pricing" underline="hover">Pricing</Link>
      <Link href="/old-page" disabled>Deprecated page</Link>
    </div>
  );
}

Features

Automatic rel='noopener noreferrer' for external links
External indicator with screen reader text '(opens in new tab)'
Underline variants: always, hover, focus, never
Disabled state with aria-disabled
CSS variable customization

Props

Link component props
Prop	Type	Default	Description
`href`*	`string`	-	Link destination URL
`external`	`boolean`	`false`	Opens in new tab with security attributes
`underline`	`'always' \| 'hover' \| 'focus' \| 'never'`	`'always'`	Underline behavior
`disabled`	`boolean`	`false`	Disables the link
`unstyled`	`boolean`	`false`	Removes all default styles
`children`*	`ReactNode`	-	Link content

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Link
Key	Action
`Enter`	Activates the link