Foundation and layout

Link

Accessible inline and standalone navigation links.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Link } from "@cofob/design-system-react";

/**
 * Complete Link parameter reference.
 * @param href
 *   type: string
 *   default: —
 *   example: "/guide"
 * @param external
 *   type: boolean
 *   default: false
 *   example: true
 * @param quiet/underline
 *   type: boolean (React) | "always" | "hover" | "none" (Svelte)
 *   default: false / "always"
 *   example: true / "hover"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param anchor attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function LinkExample() {
  return (
    <Link href="/guide">Guide</Link>
  );
}

Svelte

<script lang="ts">
  import { Link } from "@cofob/design-system-svelte";

  // Complete Link parameter reference.
  // href
  //   type: string
  //   default: —
  //   example: "/guide"
  // external
  //   type: boolean
  //   default: false
  //   example: true
  // quiet/underline
  //   type: boolean (React) | "always" | "hover" | "none" (Svelte)
  //   default: false / "always"
  //   example: true / "hover"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // anchor attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Link href="/guide">Guide</Link>

HTML

<!--
  Complete Link parameter reference.
  href
    type: string
    default: —
    example: "/guide"
  external
    type: boolean
    default: false
    example: true
  quiet/underline
    type: boolean (React) | "always" | "hover" | "none" (Svelte)
    default: false / "always"
    example: true / "hover"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  anchor attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<a class="cf-link" href="/guide">Guide</a>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-link`
Adapters	Native · React · Svelte
Primary props	href · external · quiet/underline · children · anchor attributes
Documented states	default · hover/focus where interactive · disabled where applicable
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`href`	`string`	`—`	React · Svelte · HTML	`"/guide"`	Navigation destination; makes Card interactive when provided.
`external`	`boolean`	`false`	React · Svelte · HTML	`true`	Adds safe new-tab behavior and an external-link affordance.
`quiet/underline`	`boolean (React) \| "always" \| "hover" \| "none" (Svelte)`	`false / "always"`	React · Svelte · HTML	`true / "hover"`	Controls link emphasis and underline behavior for each adapter.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`anchor attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.