Primitive / Atomstable

Link

Tokenized anchor primitive with focus ring and variant surfaces.

@glinui/uiComponent: link

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add link

Usage

TSX
1import { Link } from "@glinui/ui"
2
3export function Demo() {
4 return (
5 <div className="flex flex-wrap gap-2">
6 <Link href="#">Default</Link>
7 <Link href="#" variant="glass">Glass</Link>
8 <Link href="#" variant="outline">Outline</Link>
9 <Link href="#" variant="ghost">Ghost</Link>
10 </div>
11 )
12}

Accessibility

  • Uses semantic anchor element with keyboard navigation.
  • Focus-visible ring is applied for keyboard users.

Keyboard Interactions

KeyAction
EnterOpen the link destination.

ARIA Attributes

  • `role="link"` native
  • `aria-current` for active navigation states

Reduced Motion

Hover/focus styles are color-only and respect reduced motion settings.

Affected properties

colorbackground-colorborder-color

API Reference

PropTypeRequiredDefaultDescription
hrefstring--Destination URL.
variant"default" | "glass" | "outline" | "ghost"NodefaultSurface treatment.
size"sm" | "md" | "lg"NomdText scale.
underline"true" | "false"NotrueEnable underline decoration.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Link } from "@glinui/ui"

Source Files

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/link.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

LinkProps

LinkProps

PropTypeRequiredDefaultDescription
size"sm" | "md" | "lg"No"md"Variant option from linkVariants.
underline"true" | "false"NotrueVariant option from linkVariants.
variant"default" | "glass" | "outline" | "ghost"No"default"Variant option from linkVariants.