Link

Usage

import { Link } from '@accelint/design-toolkit';

export function MyNav() {
  return <Link href="/dashboard">Go to Dashboard</Link>;
}

Reference

interface LinkProps {
  href: string;
  children: React.ReactNode;
  className?: string;
  allowsVisited?: boolean;
  isVisited?: boolean;
}

Props

Prop	Type	Default	Required
`href`	`string`	-	Yes
`children`	`React.ReactNode`	-	Yes
`className`	`string`	-	No
`allowsVisited`	`boolean`	`false`	No
`isVisited`	`boolean`	`false`	No

`allowsVisited`

When true, enables visited state styling. Must be combined with isVisited to actually apply visited styles.

`isVisited`

Controls whether the link displays in a visited state. Only takes effect when allowsVisited is also true.

Inherited Props

Link inherits all props from React Aria's Link component, including:

target - Specifies where to open the linked document (_blank, _self, etc.)
rel - Relationship between current and linked document
download - Prompts to download the linked URL
isDisabled - Disables the link

See React Aria Link for full API reference.

Examples

Example: Basic internal link

import { Link } from '@accelint/design-toolkit';

<Link href="/about">About Us</Link>

Example: External link

import { Link } from '@accelint/design-toolkit';

<Link href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</Link>

Good to know: When using target="_blank", always include rel="noopener noreferrer" for security.

Example: Link with visited state

import { Link } from '@accelint/design-toolkit';
import { useState } from 'react';

export function VisitedLink() {
  const [visited, setVisited] = useState(false);

  return (
    <Link
      href="/page"
      allowsVisited
      isVisited={visited}
      onPress={() => setVisited(true)}
    >
      Click to visit
    </Link>
  );
}

Example: Disabled link

import { Link } from '@accelint/design-toolkit';

<Link href="/unavailable" isDisabled>
  Coming Soon
</Link>

Example: Link with icon

import { Link, Icon } from '@accelint/design-toolkit';
import { ExternalLink } from '@accelint/icons';

<Link href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Site
  <Icon size="small">
    <ExternalLink />
  </Icon>
</Link>

Example: Download link

import { Link } from '@accelint/design-toolkit';

<Link href="/files/document.pdf" download>
  Download PDF
</Link>

import { Link } from '@accelint/design-toolkit';

<Link
  href="/dashboard"
  className="font-bold text-blue-600 hover:text-blue-800 underline"
>
  Dashboard
</Link>

Example: Router integration

import { Link } from '@accelint/design-toolkit';
import { useNavigate } from 'react-router-dom';

export function RouterLink() {
  const navigate = useNavigate();

  return (
    <Link
      href="/profile"
      onPress={(e) => {
        e.preventDefault();
        navigate('/profile');
      }}
    >
      View Profile
    </Link>
  );
}

Good to know: The Link component uses onPress from React Aria, which handles both mouse clicks and keyboard activation (Enter/Space), providing better accessibility than onClick.

Button - Button component for actions
Icon - Icon component for link decorations