Skip to main content
SanchikaEvidence contracts
Primary navigation
Search Source

Primitive contract

Link

Navigates to another document, route, fragment, or downloadable resource with a persistent non-color affordance.

Navigation target · @sanchika/primitives

Purpose and semantics

Navigates to another document, route, fragment, or downloadable resource with a persistent non-color affordance.

Recommended semantic: Use a native anchor with href. Link does not turn non-anchor elements into navigation controls.

Anatomy

label

Destination or purpose understandable outside visual position.

optional context

External, download, or file-type naming in visible or assistive text.

Finite variants and important states

Variant · variant
default, quiet
Required states
default, hover, focus-visible, visited
Class hooks
.sk-link · .sk-link-default · .sk-link-quiet

Composed synthetic exemplar

Rendered state matrix

Link: 4 required states

Each specimen starts from the package-owned example and contract state inventory. Simulated pointer and focus frames are labelled; consumers still verify real interaction in context.

hoverPointer acknowledgement; the label and action stay unchanged.
Inspect source
focus visibleKeyboard focus remains explicit and independent of motion.
Inspect source
visitedThe visited contract remains visible and inspectable.
Inspect source

Accessibility and consumer responsibility

Keyboard and screen reader
  • Native anchor activation and focus behavior
  • Do not add button keyboard handlers
  • Name external destinations or include assistive context
  • Avoid repeated ambiguous labels such as Read more
Consumer owns
  • Provide href
  • Name external/download behavior
  • Use Button for actions
Mobile
  • Long labels wrap
  • Inline links remain distinguishable at zoom
Reduced motion and forced colors

Color feedback remains immediate when transitions are reduced.

  • Underline remains
  • Focus uses Highlight
  • Link uses system LinkText where available

Compact API reference

Package
@sanchika/primitives
CSS
@sanchika/primitives/styles.css
Contract
primitiveSpecs.find((contract) => contract.name === "Link")
Primary class
.sk-link