Link

Accessible, unstyled native anchor link with disabled and inert guards.


Package	`@vizejs/ui/link`
Maturity	stable
Own the source	`vize lib pull link`
Requires	id
Aliases	anchor, navigation link, disabled link
Covers	HTML anchor, React Aria Link, Reka UI Primitive

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Link } from "@vizejs/ui/link";

Or copy the source into your project with vize lib pull link (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Account navigation links marking the current page and a disabled destination. -->
<script setup lang="ts">
import { Link } from "@vizejs/ui/link";
</script>

<template>
  <nav aria-label="Account">
    <ul>
      <li><Link href="/account" aria-current="page">Overview</Link></li>
      <li><Link href="/account/billing">Billing</Link></li>
      <li><Link href="/account/team" disabled>Team (upgrade required)</Link></li>
      <li>
        <Link href="https://status.example.com" target="_blank" rel="noopener noreferrer"
          >Service status (opens in a new tab)</Link
        >
      </li>
    </ul>
  </nav>
</template>

API

`Link`

Source: src/families/navigation/link/link-anchor.vue

Props

Prop	Type	Default	Description
`id`	`string \| null`	`undefined`	Consumer-owned anchor id. `null` and `undefined` select a deterministic fallback.
`href`	`string`	`undefined`	Native navigation target for the anchor.
`target`	`string`	`undefined`	Native browsing context target.
`rel`	`string`	`undefined`	Native relationship tokens such as `noopener` or `external`.
`download`	`LinkDownload`	`undefined`	Native download hint. `true` renders the boolean attribute.
`disabled`	`boolean`	`false`	Remove link activation and sequential keyboard focus.
`inert`	`boolean`	`false`	Apply native inertness while also suppressing anchor activation in older runtimes.
`ariaCurrent`	`LinkAriaCurrent`	`undefined`	Mark the link as the current item in a set.

Events

Event	Payload	Description
`navigate`	`[event: MouseEvent]`	Fired when an enabled link receives pointer or keyboard activation.

Slots

Slot	Slot props	Description
`default`	`LinkSlotState`	Renders link contents with current availability state.

Exposed

Member	Type	Description
`focus`	`(options?: FocusOptions) => void`	Move focus to the native anchor.
`element`	`Readonly<ShallowRef<HTMLElement \| null>>`	Template ref to the rendered root element.

Behavior

Normative state × input → outcome table for link-anchor.vue (@vizejs/ui/link). Every row is proven by the named mounted-DOM test in src/families/navigation/link/link.test.ts; a row without a passing test is a contract violation.

#	State	Input	Outcome	Proven by
L1	idle, native	render	native `<a href>`, deterministic `id`, accessible name, forwarded link attributes, current state	`renders a native link with navigation and accessibility attributes`
L2	idle	Tab / `focus()`	link receives focus through native tab order and the exposed focus method	`joins the tab order and focuses programmatically`
L3	idle	pointer click	exactly one `navigate` emit carrying the `MouseEvent`; native click listeners still run	`click emits navigate and preserves consumer click listeners`
L4	idle	Enter / Space	Enter follows native link activation; Space does not synthesize link activation	`Enter activates native links while Space remains non-activating`
L5	disabled	render	no `href`/navigation attributes, `aria-disabled="true"`, `tabindex="-1"`, `data-state=disabled`	`disabled links remove navigation, tab focus, and activation`
L6	disabled	click / Enter / Space	no `navigate` and no consumer click listener	`disabled links remove navigation, tab focus, and activation`
L7	inert	render	native `inert`, no `href`, `aria-disabled="true"`, `tabindex="-1"`, `data-state=inert`	`inert links expose native inertness and suppress fallback activation`
L8	inert	click / Enter / Space	no `navigate`	`inert links expose native inertness and suppress fallback activation`
L9	any	default slot render	slot receives live `disabled`, `inert`, and `unavailable` state	`exposes disabled, inert, and unavailable to the default slot`
L10	non-current	render	`aria-current` is omitted for `false`	`renders a native link with navigation and accessibility attributes`

Disabled and inert states deliberately omit href so the anchor cannot be activated through native navigation in runtimes that do not enforce inertness. Styling remains entirely consumer-owned; the component only publishes semantic attributes and state hooks.