navigation — wyrd.component.link
Inline navigation primitive that uses native web anchors and emits a canonical press event for host runtimes without native navigation.
Install @wyrd-company/react or the Flutter package and use it directly —
your DESIGN.md does the styling.
$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity: name: Link tag: wyrd-link package: wyrd.component.link title: Link summary: Inline navigation primitive that uses native web anchors and emits a canonical press event for host runtimes without native navigation.relationships: related-to: - quality-parity-and-gatesclassification: category: navigation composition: single-slot interactive: truetarget-strategy: react: required flutter: requiredsurface: properties: - name: href type: kind: string required: true serializable: true summary: Navigation destination URL. - name: target type: kind: enum values: - self - blank required: false default: self reflects: true serializable: true summary: Navigation browsing context; blank web links also set noopener noreferrer. slots: - name: content content: true required: true cardinality: exactly-one accepts: - text summary: Visible link text and accessible-name source. events: - name: press payload: href: kind: string bubbles: true composed: true cancelable: true summary: Canonical activation event emitted with the destination href when the link is activated. states: - name: default source: platform summary: Inline link in normal text flow. - name: hover source: interaction summary: Pointer hover state on hover-capable devices. - name: focus-visible source: platform summary: Keyboard-visible focus state. parts: - name: root summary: Native link control root. slots: - content tokens: color: color.primary color-hover: color.primary-hovermessages: []obligations: accessibility: role: link name: Content slot provides the accessible name. keyboard: - Enter activates the link. semantics: - Web projections use a native anchor; Flutter exposes link semantics. - Target blank web links set rel="noopener noreferrer". behavior: model: stateless interactions: - Web anchors navigate natively and also emit press. - Flutter emits press for host navigation without attempting native navigation. hostEffects: - Dispatch activation event. conditions: - rtl - reduced-motion - cvd-deuteranopia - text-expansion sdui: status: serializable serializableProperties: - href - target serializableSlots: - content eventBindings: - press notes: Link serializes its href, target, content text, and optional press binding for non-web hosts.examples: - name: inline state: default properties: href: /docs slots: content: Read the docs - name: external state: default properties: href: https://github.com/wyrd-company target: blank slots: content: View Wyrd Company on GitHub - name: relative state: default properties: href: /settings slots: content: Account settingsoverrides: react: slots: content: content
Generated from the contract's examples block.
Previews are the published @wyrd-company/react component, themed by the
brand's role tokens — flip the site's light/dark toggle and they follow.
import { WyrdLink } from "@wyrd-company/react";
<WyrdLink href="/docs" content="Read the docs" />
// events: onPressimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdLink(
href: '/docs',
child: Text('Read the docs'),
)
// events: onPressedimport { WyrdLink } from "@wyrd-company/react";
<WyrdLink href="https://github.com/wyrd-company" target="blank" content="View Wyrd Company on GitHub" />
// events: onPressimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdLink(
href: 'https://github.com/wyrd-company',
target: 'blank',
child: Text('View Wyrd Company on GitHub'),
)
// events: onPressedimport { WyrdLink } from "@wyrd-company/react";
<WyrdLink href="/settings" content="Account settings" />
// events: onPressimport 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdLink(
href: '/settings',
child: Text('Account settings'),
)
// events: onPressed| Name | Type | Default | Summary |
|---|---|---|---|
href | string | undefined | Navigation destination URL. |
target | self | blank | self | Navigation browsing context; blank web links also set noopener noreferrer. |
| Slot | Cardinality | Accepts | Summary |
|---|---|---|---|
content | exactly-one | text | Visible link text and accessible-name source. |
| Event | Payload | Summary |
|---|---|---|
press | href | Canonical activation event emitted with the destination href when the link is activated. |
The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.
| Binding | Token | |
|---|---|---|
color | color.primary | |
color-hover | color.primary-hover |
| State | Source | Summary |
|---|---|---|
default | platform | Inline link in normal text flow. |
hover | interaction | Pointer hover state on hover-capable devices. |
focus-visible | platform | Keyboard-visible focus state. |
From the contract's accessibility obligations. Role link; Content slot provides the accessible name.
Status: serializable. Link serializes its href, target, content text, and optional press binding for non-web hosts.
| Serializable | Members |
|---|---|
| Properties | href, target |
| Slots | content |
| Events | press |