Glin UI
Radix UIBase UI
Primitive / Atom

Link

Tokenized anchor primitive with focus ring and variant surfaces.

Edit on GitHub
v2.4

Released 3 October

Faster dashboards

Charts now render from cached queries, so the overview loads in under a second. Read the migration notes before upgrading, or check the full changelog.

Read the release postDownload notes

Installation

Install from
pnpm dlx @glinui/cli@latest add link

Prefer the package?

Usage

Styles

Underline, no underline, arrow, outline and size options.

Default underlined linkLink without underlineArrow linkOutline linkLarge link
"use client"



import {
  Link
} from "@glinui/ui"



export function LinkStatesExample() {
  return (
    <div className="mx-auto grid w-full max-w-md gap-3">
      <Link href="#">Default underlined link</Link>
      <Link href="#" underline={false}>Link without underline</Link>
      <Link href="#" variant="arrow">Arrow link</Link>
      <Link href="#" variant="outline">Outline link</Link>
      <Link href="#" size="lg">Large link</Link>
    </div>
  )
}

Inline and footer links

Links inside running text and in a footer column group.

Read the migration guide before upgrading, then check the API reference for removed fields. Need help? Talk to support

import { Heading, Link, Text } from "@glinui/ui"



const columns: Array<[string, string[]]> = [
  ["Product", ["Features", "Pricing", "Changelog", "Status"]],
  ["Developers", ["Documentation", "API reference", "SDKs", "Community"]],
  ["Company", ["About", "Careers", "Press kit", "Contact"]]
]



export function LinkShowcase() {
  return (
    <div className="flex w-full max-w-2xl flex-col gap-6 rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-1)] p-6 text-left">
      <Text variant="muted">
        Read the <Link href="/guide">migration guide</Link> before upgrading, then check the <Link href="/api" variant="outline">API reference</Link> for removed fields.
        Need help? <Link href="/support" variant="arrow">Talk to support</Link>
      </Text>
      <nav aria-label="Footer" className="grid grid-cols-2 gap-6 border-t border-[var(--line-soft)] pt-6 sm:grid-cols-3">
        {columns.map(([title, links]) => (
          <div key={title} className="flex flex-col gap-2">
            <Heading level={3} size="sm">{title}</Heading>
            <ul className="flex flex-col gap-1.5">
              {links.map((label) => (
                <li key={label}><Link href="#" variant="ghost" underline={false} size="sm">{label}</Link></li>
              ))}
            </ul>
          </div>
        ))}
      </nav>
    </div>
  )
}

Variants

Default, arrow, outline, ghost and glass.

DefaultArrowOutlineGhostGlass
import { Link } from "@glinui/ui"



export function LinkVariants() {
  return (
    <div data-glin-theme="dark" className="flex w-full flex-wrap items-center justify-center gap-4 rounded-xl bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 p-8">
      <Link href="#" variant="default">Default</Link>
      <Link href="#" variant="arrow">Arrow</Link>
      <Link href="#" variant="outline">Outline</Link>
      <Link href="#" variant="ghost">Ghost</Link>
      <Link href="#" variant="glass">Glass</Link>
    </div>
  )
}

In a layout

A guide card with a primary arrow link and a quieter secondary one.

Guide

Set up single sign on

Connect Okta, Entra ID or Google Workspace in about ten minutes, then require SSO for every member.

Read the guideWatch the 3 min video
import { BookOpen } from "@phosphor-icons/react"
import { Heading, Link, Text } from "@glinui/ui"



export function GuideCard() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3 rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-1)] p-6 text-left">
      <div className="flex items-center gap-2 text-[var(--color-muted)]"><BookOpen aria-hidden className="size-4" /><Text variant="eyebrow">Guide</Text></div>
      <Heading level={3} size="md">Set up single sign on</Heading>
      <Text variant="muted">Connect Okta, Entra ID or Google Workspace in about ten minutes, then require SSO for every member.</Text>
      <div className="flex items-center justify-between gap-3 pt-1">
        <Link href="/guides/sso" variant="arrow">Read the guide</Link>
        <Link href="/guides/sso/video" size="sm" underline={false} variant="ghost">Watch the 3 min video</Link>
      </div>
    </div>
  )
}

Variants

import { Link } from "@glinui/ui"

export function LinkVariantDemo() {
  return (
    <div className="flex flex-wrap gap-4">
      <Link href="#" variant="default">Default</Link>
      <Link href="#" variant="glass">Glass</Link>
      <Link href="#" variant="outline">Outline</Link>
      <Link href="#" variant="ghost">Ghost</Link>
    </div>
  )
}

Without Underline

Disable the underline decoration for inline link usage or icon-only anchors.

import { Link } from "@glinui/ui"

export function LinkNoUnderlineDemo() {
  return (
    <div className="flex flex-wrap gap-4">
      <Link href="#">With underline</Link>
      <Link href="#" underline={false}>Without underline</Link>
    </div>
  )
}

Sizes

import { Link } from "@glinui/ui"

export function LinkSizeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Link href="#" size="sm">Small</Link>
      <Link href="#" size="md">Medium</Link>
      <Link href="#" size="lg">Large</Link>
    </div>
  )
}

External Link

Pass standard anchor attributes like `target` and `rel` for external URLs.

import { Link } from "@glinui/ui"

export function LinkExternalDemo() {
  return (
    <Link href="https://glinui.dev" target="_blank" rel="noopener noreferrer">
      Open Glin UI site ↗
    </Link>
  )
}

Arrow link

Accent link whose arrow moves 3px on hover. The motion is disabled under prefers-reduced-motion.

import { Link } from "@glinui/ui"

export function Demo() {
  return <Link variant="arrow" href="/docs">Read the docs</Link>
}

Accessibility

  • Uses semantic anchor element with keyboard navigation.
  • Focus-visible ring is applied for keyboard users.
  • `Link` renders a native `<a>` element, which is keyboard-focusable by default.
  • A visible focus ring is applied via the design token system, do not suppress it with `outline-none` without a custom focus style.
  • For external links, always include `rel="noopener noreferrer"` to prevent tab-napping.
  • If the link text is not self-descriptive (e.g. "click here"), add an `aria-label` describing the destination.

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.

`Link` has no animation and is unaffected by `prefers-reduced-motion`.

Affected properties

colorbackground-colorborder-color

API Reference

PropTypeRequiredDefaultDescription
hrefstring--Destination URL.
variant"default" | "glass" | "outline" | "ghost" | "arrow"NodefaultSurface treatment.
size"sm" | "md" | "lg"NomdText scale.
underline"true" | "false"NotrueEnable underline decoration.
hideArrowbooleanNofalseArrow variant only: hide the trailing arrow icon.

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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

LinkProps

LinkProps

PropTypeRequiredDefaultDescription
hideArrowbooleanNofalseArrow variant only: hide the trailing arrow icon.
size"sm" | "md" | "lg"No"md"Variant option from linkVariants.
underline"true" | "false"NotrueVariant option from linkVariants.
variant"default" | "glass" | "outline" | "ghost" | "arrow"No"default"Variant option from linkVariants.