LinkCopy Anchor Link

Links allow users to navigate between pages, jump to specific page anchors, or navigate to external web resources. Built on React Aria Components Link, Hashti’s Link component seamlessly supports traditional hyperlinks, client-side single page app (SPA) routers, and accessible inline prose citations.

Architecture & Visual IntentCopy Anchor Link

In architectural design, hallways and archways guide foot traffic with quiet certainty. Hashti’s Link component provides crisp textual contrast and visual affordances to indicate navigational pathways:

[Prose Context] ──► <Link inline href="/docs">Docs</Link> ──► [Continuous Underline]
[Standalone Action] ──► <Link href="/portal">Portal →</Link> ──► [Clean Text + Icon]

• Dual Rendering Mechanism: When an active href is supplied, Link renders a semantic HTML <a> tag. When href is omitted or isDisabled is set, it renders a semantic <span role="link"> with proper accessibility attributes.
• Client-Side Routing Compatibility: Works out of the box with Astro, Next.js (next/link), React Router, and Remix via router context or client navigation handlers.
• Inline vs. Standalone Modes: Distinguish between dense body prose links (which need persistent underlines for accessibility) and standalone directional links.

ImportCopy Anchor Link

import { Link } from "@hashti/react";
import type { LinkProps } from "@hashti/react";

Usage ExamplesCopy Anchor Link

Inline Prose LinkCopy Anchor Link

Within running body copy or articles, pass inline={true}. This applies a persistent underline (text-decoration: underline) to ensure WCAG 2.2 AAA accessibility compliance for color-blind users who cannot differentiate links purely by hue:

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

export function InlineLinkDemo() {
  return (
    <p className="text-sm leading-relaxed text-neutral-800 dark:text-neutral-200">
      Please review our comprehensive{" "}
      <Link href="/docs/getting-started/accessibility" inline>
        Accessibility Guidelines
      </Link>{" "}
      before submitting your pull request to the Hashti repository.
    </p>
  );
}

Standalone Navigational Link with IconCopy Anchor Link

Standalone links are placed outside running body paragraphs (e.g., in footers, cards, or hero banners). They typically include directional icons:

import { Link, Icon } from "@hashti/react";

export function StandaloneLinkDemo() {
  return (
    <div className="flex flex-col gap-3">
      <Link href="/docs/components/button" className="inline-flex items-center gap-1.5 font-medium">
        Explore Button component
        <Icon name="arrowRight" size={16} />
      </Link>

      <Link
        href="/docs/foundations/theming"
        className="inline-flex items-center gap-1.5 font-medium"
      >
        Discover Theme Tokens
        <Icon name="arrowRight" size={16} />
      </Link>
    </div>
  );
}

External LinksCopy Anchor Link

For links leading to external web resources, specify target="_blank" and rel="noopener noreferrer". It is best practice to include an external link icon and an accessible screen-reader warning:

import { Link, Icon } from "@hashti/react";

export function ExternalLinkDemo() {
  return (
    <Link
      href="https://github.com/raminrez/hashti"
      target="_blank"
      rel="noopener noreferrer"
      className="inline-flex items-center gap-1.5 font-medium text-blue-600 dark:text-blue-400"
    >
      Hashti GitHub Repository
      <Icon name="launch" size={14} />
      <span className="sr-only">(opens in new window)</span>
    </Link>
  );
}

Disabled Link StateCopy Anchor Link

Disabled links cannot be focused via keyboard navigation, reject pointer interactions, and communicate their inactive state via aria-disabled="true":

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

export function DisabledLinkDemo() {
  return (
    <div className="flex gap-4">
      <Link href="/billing" isDisabled>
        Enterprise Billing (Requires Admin Privileges)
      </Link>
    </div>
  );
}

Props ReferenceCopy Anchor Link

Link extends RACLinkProps from react-aria-components.

Accessibility & Keyboard NavigationCopy Anchor Link

Hashti links adhere to W3C ARIA practices for hyperlink controls:

Keyboard InteractionCopy Anchor Link

• Enter: Activates the link and follows the destination URL.
• Tab: Moves keyboard focus onto the link. Focused links render a 2px offset focus ring.

Assistive Technology NotesCopy Anchor Link

• Native Anchors: When href is supplied and isDisabled is false, renders standard <a href="..."> elements that assistive technologies report as links.
• External Notifications: Always provide visual and auditory indicators (such as <span className="sr-only">(opens in new tab)</span>) when a link opens a new browser window or tab.
• Color Distinguishability: Under WCAG 2.2 Criterion 1.4.1 (Use of Color), links surrounded by text must be distinguishable by more than color alone. Using inline={true} applies an underline that guarantees compliance.

Keyboard InteractionsCopy Anchor Link

WAI-ARIA & Data AttributesCopy Anchor Link