Link

In review

Live · web

Inline in prose: tab through, click them

Nockerl orchestrates Cloud Agent sessions and agents. Start in the session console, review the component catalog, then open the design tokens(opens in a new tab) on GitHub. A link mid-sentence sits cleanly on the same baseline as the words around it.

Already-read references quietly recede: the deployment playbook (visited) stays legible without competing for attention.

Standalone & with icons

View all sessionsOpen the live docs site(opens in a new tab)Download the APK

States: muted · visited · disabled

Subtle / muted linkVisited linkDisabled link

On a cyan accent surface: on-accent token

Your trial ends in 3 days. Upgrade your plan or read the pricing(opens in a new tab).

NockerlLink activated 0 times. Real anchors, and the island is live.

Code

TypeScript

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.)
// A link is a true <a>: text emphasis (cyan accent + underline), inline or standalone.
import { NockerlLink } from '@dizyx/nockerl-react';

export function Footnotes() {
  return (
    <p>
      Start in the <NockerlLink href="/sessions">session console</NockerlLink>, then open the{' '}
      <NockerlLink href="https://github.com/dizyx/nockerl-design" external>design tokens</NockerlLink>.
      {/* external → target="_blank" rel="noopener noreferrer" + ↗ glyph + a11y hint */}
      <NockerlLink href="/docs" variant="muted">Subtle inline reference</NockerlLink>
      <NockerlLink href="/app.apk" leadingIcon={<DownloadIcon />}>Download the APK</NockerlLink>
      <NockerlLink href="/upgrade" onAccent>Upgrade your plan</NockerlLink>   {/* on a cyan surface */}
    </p>
  );
}

Kotlin

// Android: Jetpack Compose (canonical). There is no bespoke NockerlLink composable
// yet: chat/ui/MarkdownContent.kt renders links through the markdown renderer, which
// styles them via Compose's TextLinkStyles + LinkAnnotation + UriHandler. This is that
// underlying primitive, bound to the single cyan brand accent + an underline.
import androidx.compose.material3.Text
import androidx.compose.ui.text.LinkAnnotation
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.TextLinkStyles
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.withLink

val accent = NockerlTheme.colors.accentPrimary   // brand cyan, the only link color
val linkStyles = TextLinkStyles(
    style = SpanStyle(color = accent, textDecoration = TextDecoration.Underline),
)

Text(
    buildAnnotatedString {
        append("Open the ")
        withLink(LinkAnnotation.Url(url = "https://nockerl.dizyx.com", styles = linkStyles)) {
            append("docs site")   // UriHandler from the environment opens the URL
        }
    },
)

Swift

// macOS: SwiftUI (intended). Nockerl Voice ships no link component today (it opens
// system URLs via NSWorkspace and tints with NockerlTheme.accent); this is the
// intended link treatment: SwiftUI Link / markdown Text, the accent as tint.
import SwiftUI

// Standalone link.
Link("Open the docs site", destination: URL(string: "https://nockerl.dizyx.com")!)
    .tint(NockerlTheme.accent)            // brand cyan, the only link color
    .underline()

// Inline links inside prose come free from markdown; the tint sets the link color.
Text("Start in the [session console](nockerl://sessions) or read the [tokens](https://github.com/dizyx).")
    .tint(NockerlTheme.accent)

Parameters

TypeScript

Prop	Type	Default	Description
children *	React.ReactNode	n/a	Visible link text.
href	string	'#'	Destination. Demo uses "#"; real links pass a URL.
variant	NockerlLinkVariant	'default'	Emphasis: cyan accent (default) or subtle/inherit-color (muted).
onAccent	boolean	false	Renders on a cyan accent surface, so text flips to the on-accent token.
visited	boolean	false	Force the visited (already-read) treatment regardless of history: the recede state a real visited link earns via :visited. For docs/showcase + tests.
external	boolean	false	Marks the link as external: adds the ↗ glyph + target/rel + a11y hint.
disabled	boolean	false	Inert + clearly-seen (never invisible) state. aria-disabled, not focusable.
leadingIcon	React.ReactNode	n/a	Optional leading glyph (e.g. a download icon), baseline-aligned.
onClick	() => void	n/a	Click handler (the demo blocks navigation so "#" doesn't jump).

Also accepts the native <a> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.

Kotlin

Parameter	Type	Default	Description
LinkAnnotation.Url(url) *	String	n/a	The destination, attached over a span via withLink inside buildAnnotatedString.
styles	TextLinkStyles	n/a	Per-state link styling. Nockerl uses SpanStyle(color = accentPrimary, textDecoration = Underline), the cyan brand accent + an underline.
TextLinkStyles.style	SpanStyle?	n/a	Rest style. color = NockerlTheme.colors.accentPrimary; textDecoration = TextDecoration.Underline.
TextLinkStyles.hoveredStyle	SpanStyle?	null	Pointer-hover style (desktop / Chromebook). Android touch has no hover; press is the feedback.
TextLinkStyles.focusedStyle	SpanStyle?	null	Focus style for D-pad / keyboard traversal.
UriHandler	LocalUriHandler	n/a	Ambient handler that opens the tapped URL; supplied by the Compose environment.
LinkInteractionListener	(LinkAnnotation) -> Unit	null	Optional override for click handling instead of the default UriHandler open.

Swift

SwiftUI renders links with the standard Link view or markdown inside Text; the link color comes from the environment tint. There is no shipped Nockerl link component. These are the intended bindings.

Style	Type	Default	Description
Link(_:destination:)	View	n/a	Standalone link to a URL. Activates via click and full keyboard focus.
.tint(_:)	Color	n/a	The link color. Bound to NockerlTheme.accent (brand cyan), the only link color.
.underline()	Text	n/a	The underline affordance on standalone links (markdown links carry it automatically).
Text("[label](url)")	View	n/a	Inline links inside prose via markdown; the inherited tint colors them.
environment(\.openURL)	OpenURLAction	n/a	Optional override of how a tapped link opens (custom routing instead of the system handler).

Cross-platform drift (tracked for reconciliation)

The treatment is unified (cyan accent + underline); the implementations differ:

• No shared link component yet. Web documents the intended @dizyx/nockerl-react Link; Android has no NockerlLink, so links are markdown-rendered via TextLinkStyles / LinkAnnotation; Swift/Voice ships no link at all (it opens system URLs via NSWorkspace). All three should converge on one link spec.
• Underline default. Web + Swift underline at rest; the renderer’s TextLinkStyles on Android should pin TextDecoration.Underline so links never read as plain accent text.
• Link color token. Bind every platform to the single accent (accent.primary), with no per-platform link hue.