Link

The Link component renders a normalized LinkItem as a semantic <a> element. It supports variant-based styling via class-variance-authority, automatic _blank security enforcement, disabled state handling, download links, and invalid destination fallback rendering.

npx shadcn@latest add @rokkit200-ui/link

Preview

Lorem Ipsum

Code

import { Link } from "@/registry/rokkit200-ui/components/link/link";

export default function LinkDefaultDemo() {
    return <Link href="#">Lorem Ipsum</Link>;
}

Usage

import { Link } from "@/rokkit200-ui/components/link/link";

<Link href="#">
    Lorem Ipsum
</Link>

Examples

Primary

High-emphasis navigation action — the default variant.

Preview

Lorem Ipsum

Code

import { Link } from "@/registry/rokkit200-ui/components/link/link";

export default function LinkPrimaryDemo() {
    return (
        <Link variant="primary" href="#">
            Lorem Ipsum
        </Link>
    );
}

Secondary

Lower-emphasis navigation that maintains visual distinction.

Preview

Lorem Ipsum

Code

import { Link } from "@/registry/rokkit200-ui/components/link/link";

export default function LinkSecondaryDemo() {
    return (
        <Link variant="secondary" href="#">
            Lorem Ipsum
        </Link>
    );
}

Outline

Minimal visual weight, suited to dense layouts.

Preview

Lorem Ipsum

Code

import { Link } from "@/registry/rokkit200-ui/components/link/link";

export default function LinkOutlineDemo() {
    return (
        <Link variant="outline" href="#">
            Lorem Ipsum
        </Link>
    );
}

Disabled

Non-interactive: href is removed, aria-disabled="true" is set, tabIndex is -1, and click events are suppressed.

Preview

Lorem Ipsum

Code

import { Link } from "@/registry/rokkit200-ui/components/link/link";

export default function LinkDisabledDemo() {
    return (
        <Link href="#" disabled>
            Lorem Ipsum
        </Link>
    );
}

Icon

Icon-only links use kind="icon" for a circular shape. An aria-label is required for accessibility.

Preview

Code

import { Icon } from "@/registry/rokkit200-ui/components/icon/icon";
import { Link } from "@/registry/rokkit200-ui/components/link/link";

export default function LinkIconDemo() {
    return (
        <Link variant="primary" kind="icon" href="#" aria-label="Home">
            <Icon iconPath="svg/icons/home_icon" height={20} width={20} />
        </Link>
    );
}

Download

Emits the download attribute with an optional filename for direct file download behavior.

Preview

Download File

Code

import { Link } from "@/registry/rokkit200-ui/components/link/link";

export default function LinkDownloadDemo() {
    return (
        <Link href="/sample.pdf" download="sample.pdf">
            Download File
        </Link>
    );
}

External (target=“_blank”)

When target="_blank" is set, rel="noopener noreferrer" is automatically enforced to prevent reverse tabnapping.

Preview

External Link

Code

import { Link } from "@/registry/rokkit200-ui/components/link/link";

export default function LinkTargetBlankDemo() {
    return (
        <Link href="https://example.com" target="_blank">
            External Link
        </Link>
    );
}

Invalid Destination Fallback

When no href is provided (representing an unresolvable destination), the component renders a non-interactive <span> preserving authored content and order.

Preview

Unresolved Link

Code

import { Link } from "@/registry/rokkit200-ui/components/link/link";

export default function LinkInvalidFallbackDemo() {
    return <Link>Unresolved Link</Link>;
}

API Reference

Prop	Type	Default	Description
href	string	undefined	Destination URL. When omitted, the component renders a non-interactive <span> fallback.
children	React.ReactNode	—	Link content — typically label text and/or icons.
variant	"primary" | "secondary" | "outline"	"primary"	Visual style variant. Shares token system with Button.
kind	"default" | "icon"	"default"	Shape/content mode. Use "icon" for icon-only links (renders rounded-full).
disabled	boolean	false	Prevents navigation and interaction. Renders aria-disabled="true" and suppresses click events.
target	"_self" | "_blank" | "_parent" | "_top"	undefined	Where to open the linked document. "_blank" auto-enforces safe rel tokens.
rel	string	undefined	Relationship attribute. Auto-supplemented with noopener noreferrer when target="_blank".
aria-label	string	undefined	Accessible name override. Required for icon-only links where visible text is absent.
title	string	undefined	HTML title attribute (tooltip). Not an accessibility substitute.
download	boolean | string	undefined	Emits the download attribute. Pass a string for a custom filename.
className	string	undefined	Additional CSS classes applied to the root element.

Security

When target="_blank" is set, the component automatically ensures rel contains both noopener and noreferrer. Explicit rel tokens from the consumer are preserved and merged.

Disabled State

• href is removed from the rendered element
• aria-disabled="true" is set
• tabIndex is -1
• Click events are fully suppressed (preventDefault + stopPropagation)
• Visual styling reflects reduced interactivity via the aria-disabled:opacity-25 utility

The HTML disabled attribute is not valid on <a> elements. This component uses aria-disabled and behavioral suppression instead.

Invalid Fallback

When href is not provided, the component renders a <span> instead of <a>:

• Non-interactive: no href, not focusable, not clickable
• Authored label text remains visible
• No role="link" is applied (it is not a link)
• Element position is preserved in authored order

Accessibility

• Always renders a semantic <a> element for valid destinations
• aria-label overrides the announced accessible name when provided
• Icon-only links (kind="icon") without aria-label emit a dev warning
• Disabled links are non-interactive and removed from tab order
• Invalid fallback <span> is non-interactive with no link role
• Focus styles meet WCAG 2.1 AA requirements

Framework Portability

The component renders standard HTML <a> elements with no router-specific behavior. For client-side navigation (Next.js <Link>, React Router), compose by wrapping this component — do not modify the core.

Related

• Button — shared variant system and visual language
• Icon — used within icon-only link variants