cv-link

Inline navigational element that directs the user to another page or resource.

Headless: createLink

Usage

View source

html

<div class="link-demo-shell" data-demo="link" data-live-demo-height="640">
  <section class="link-demo-hero" aria-labelledby="link-demo-title">
    <div class="link-demo-copy">
      <span class="link-demo-kicker">Navigation primitive</span>
      <h3 id="link-demo-title">Use links for route changes and resource jumps, not disabled actions.</h3>
      <p>
        The component keeps a native anchor in the shadow tree, forwards <code>href</code>, and exposes a
        <code>press</code> event while slots handle product-context affordances.
      </p>
    </div>

    <dl class="link-demo-metrics" aria-label="Link contract summary">
      <div>
        <dt>Root</dt>
        <dd>native anchor</dd>
      </div>
      <div>
        <dt>Activation</dt>
        <dd>click and Enter</dd>
      </div>
      <div>
        <dt>Disabled</dt>
        <dd>not supported</dd>
      </div>
    </dl>
  </section>

  <section class="link-demo-workbench" aria-labelledby="link-demo-workbench-title">
    <div class="link-demo-section-header">
      <span class="link-demo-kicker">Product copy</span>
      <h4 id="link-demo-workbench-title">Keep inline navigation readable inside dense vault text</h4>
    </div>

    <div class="link-demo-layout">
      <article class="link-demo-reader" aria-label="Inline link examples">
        <p>
          Before installing, read the
          <cv-link href="https://chromvoid.com/ru/threat-model/" target="_blank" rel="noopener noreferrer"
            >public threat model</cv-link
          >
          and keep deniable namespaces outside the visible route until a matching scenario is selected.
        </p>
        <p>
          Use the
          <cv-link
            class="link-demo-link--violet"
            href="https://chromvoid.com/ru/#architecture"
            target="_blank"
            rel="noopener noreferrer"
          >
            <svg
              slot="prefix"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
            >
              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
              <path d="M14 2v6h6"></path>
              <path d="M8 13h8"></path>
              <path d="M8 17h5"></path>
            </svg>
            architecture section
          </cv-link>
          when a route needs concrete storage, transport, and boundary details.
        </p>
        <p>
          If the destination is not available, render text or a button with disabled semantics instead of a
          fake disabled link.
        </p>
      </article>

      <aside class="link-demo-route-panel" aria-label="Route link examples">
        <div class="link-demo-route-head">
          <span class="link-demo-label">Site routes</span>
          <span class="link-demo-status">3 real links</span>
        </div>

        <div class="link-demo-route-list">
          <cv-link
            class="link-demo-route-link"
            href="https://chromvoid.com/ru/features/mounted-vault/"
            target="_blank"
            rel="noopener noreferrer"
          >
            <svg
              slot="prefix"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
            >
              <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
              <path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5"></path>
              <path d="M3 12c0 1.7 4 3 9 3s9-1.3 9-3"></path>
            </svg>
            Open Mounted Vault
          </cv-link>

          <cv-link
            class="link-demo-route-link link-demo-route-link--quiet"
            href="https://chromvoid.com/ru/features/browser-extension/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Browser Extension
            <svg
              slot="suffix"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
            >
              <path d="m9 18 6-6-6-6"></path>
            </svg>
          </cv-link>

          <cv-link
            class="link-demo-route-link link-demo-route-link--external"
            href="https://chromvoid.com/ru/features/remote/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Remote Access
            <svg
              slot="suffix"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
            >
              <path d="M15 3h6v6"></path>
              <path d="M10 14 21 3"></path>
              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
            </svg>
          </cv-link>
        </div>
      </aside>
    </div>
  </section>

  <section class="link-demo-states" aria-labelledby="link-demo-states-title">
    <div class="link-demo-section-header">
      <span class="link-demo-kicker">Slots and tone</span>
      <h4 id="link-demo-states-title">Prefix, suffix, quiet, and event feedback in one compact surface</h4>
    </div>

    <div class="link-demo-sample-grid" aria-label="Link presentation variants">
      <div class="link-demo-sample">
        <span class="link-demo-label">Inline default</span>
        <cv-link href="https://chromvoid.com/ru/#how" target="_blank" rel="noopener noreferrer"
          >How it works</cv-link
        >
      </div>

      <div class="link-demo-sample">
        <span class="link-demo-label">Prefix icon</span>
        <cv-link href="https://chromvoid.com/ru/threat-model/" target="_blank" rel="noopener noreferrer">
          <svg
            slot="prefix"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
            <path d="M14 2v6h6"></path>
            <path d="M8 13h8"></path>
            <path d="M8 17h5"></path>
          </svg>
          Read threat model
        </cv-link>
      </div>

      <div class="link-demo-sample">
        <span class="link-demo-label">Quiet route</span>
        <cv-link
          class="link-demo-link--quiet"
          href="https://chromvoid.com/ru/#download"
          target="_blank"
          rel="noopener noreferrer"
          >Download matrix</cv-link
        >
      </div>

      <div class="link-demo-sample">
        <span class="link-demo-label">Suffix affordance</span>
        <cv-link href="https://chromvoid.com/ru/#pricing" target="_blank" rel="noopener noreferrer">
          Pricing and modules
          <svg
            slot="suffix"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </cv-link>
      </div>
    </div>

    <output class="link-demo-output" data-link-demo-output aria-live="polite">
      press: waiting for activation
    </output>
  </section>
</div>

<script>
  document.querySelectorAll('.link-demo-shell[data-demo="link"]:not([data-ready])').forEach((shell) => {
    shell.dataset.ready = 'true'
    const output = shell.querySelector('[data-link-demo-output]')

    shell.addEventListener('press', (event) => {
      const detail = event.detail || {}
      if (!output) return
      output.textContent = `press: ${detail.href || '(empty href)'}`
    })
  })
</script>

Anatomy

<cv-link> (host)
└── <a part="base">
    ├── <span part="prefix">
    │   └── <slot name="prefix">
    ├── <span part="label">
    │   └── <slot>
    └── <span part="suffix">
        └── <slot name="suffix">

Attributes

Attribute	Type	Default	Description
`href`	String	`""`	Target URL; reflected to the inner anchor's `href`
`target`	String	`""`	Browsing context; reflected to the inner anchor
`rel`	String	`""`	Link relationship; reflected to the inner anchor

Slots

Slot	Description
`(default)`	Link text
`prefix`	Icon or element before label
`suffix`	Icon or element after label

CSS Parts

Part	Element	Description
`base`	`<a>`	The anchor element
`label`	`<span>`	Wrapper around the default slot
`prefix`	`<span>`	Wrapper around the `prefix` slot
`suffix`	`<span>`	Wrapper around the `suffix` slot

CSS Custom Properties

Property	Default	Description
`--cv-link-color`	`var(--cv-color-primary, #65d7ff)`	Default text and icon color
`--cv-link-color-hover`	`color-mix(in oklab, var(--cv-color-primary, #65d7ff) 78%, white)`	Text color on hover
`--cv-link-color-active`	`color-mix(in oklab, var(--cv-color-primary, #65d7ff) 60%, white)`	Text color on active press
`--cv-link-gap`	`var(--cv-space-1, 4px)`	Space between prefix, label, and suffix
`--cv-link-text-decoration`	`underline`	Text decoration style
`--cv-link-text-decoration-hover`	`none`	Text decoration on hover
`--cv-link-outline-color`	`var(--cv-color-primary, #65d7ff)`	Focus-visible outline color
`--cv-link-outline-offset`	`2px`	Focus-visible outline offset

Additionally, component styles depend on theme tokens through fallback values:

Theme Property	Default	Description
`--cv-color-primary`	`#65d7ff`	Primary accent color
`--cv-duration-fast`	`120ms`	Transition duration
`--cv-easing-standard`	`ease`	Transition timing function
`--cv-space-1`	`4px`	Small spacing scale fallback

Visual States

Host selector	Description
`:host(:hover)`	Applies `--cv-link-color-hover` to text color; updates text decoration
`:host(:focus-visible)`	Shows outline ring around the base element
`:host(:active)`	Applies `--cv-link-color-active` to text color

Reactive State Mapping

cv-link is a visual adapter over headless createLink.

UIKit Property	Direction	Headless Binding
`href`	attr -> option	passed as `href` in `createLink(options)`
`target`	attr -> DOM	reflected directly to inner anchor by UIKit
`rel`	attr -> DOM	reflected directly to inner anchor by UIKit

Headless State	Direction	DOM Reflection
(none)	—	Link is stateless at the headless level

contracts.getLinkProps() is spread onto the inner [part="base"] element to apply id, href, and keyboard/click handlers.
Because the inner element is a native <a>, createLink is called with isSemanticHost: true, so role and tabindex are omitted from the contract (the native element provides them).
When href changes, the model is recreated with the new value (headless link options are immutable).
UIKit dispatches a press event by providing an onPress callback to the headless createLink options.
UIKit does not own activation logic; headless event handlers are the source of truth.

Events

Event	Detail	Description
`press`	`{href: string}`	Fires on activation (click or `Enter` keypress)

cv-link ​

Usage ​

Anatomy ​

Attributes ​

Slots ​

CSS Parts ​

CSS Custom Properties ​

Visual States ​

Reactive State Mapping ​

Events ​