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 link Visited link Disabled 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

// 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>
  );
}

// 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
        }
    },
)

// 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

Prop	Type	Default	Description
`children` *	`React.ReactNode`		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`		Optional leading glyph (e.g. a download icon), baseline-aligned.
`onClick`	`() => void`		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.

Parameter	Type	Default	Description
`LinkAnnotation.Url(url)` *	`String`		The destination, attached over a span via `withLink` inside `buildAnnotatedString`.
`styles`	`TextLinkStyles`		Per-state link styling. Nockerl uses `SpanStyle(color = accentPrimary, textDecoration = Underline)`, the cyan brand accent + an underline.
`TextLinkStyles.style`	`SpanStyle?`		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`		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.

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	Description
`Link(_:destination:)`	`View`	Standalone link to a `URL`. Activates via click and full keyboard focus.
`.tint(_:)`	`Color`	The link color. Bound to `NockerlTheme.accent` (brand cyan), the only link color.
`.underline()`	`Text`	The underline affordance on standalone links (markdown links carry it automatically).
`Text("[label](url)")`	`View`	Inline links inside prose via markdown; the inherited `tint` colors them.
`environment(\.openURL)`	`OpenURLAction`	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.