Kappa / Link

Start with the installation guide.

<script setup>
import { Link } from "@dicehub/kappa/components/link";
</script>

<template>
  <p>Start with the <Link href="/docs/installation">installation guide</Link>.</p>
</template>

Installation

Link is part of the main Kappa package. Native anchor behavior owns navigation and the Ark UI factory supplies attribute merging for framework composition.

Barrel

import { Link } from "@dicehub/kappa";

Granular

import { Link } from "@dicehub/kappa/components/link";

Usage

Use Link when activation changes location. Use Button for an action and LinkButton when navigation needs button geometry. Link text must describe the destination.

Use Button for actions and Link for navigation.

<script setup>
import { Link } from "@dicehub/kappa/components/link";
</script>

<template>
  <p>
    Use <Link href="/docs/components/button">Button</Link> for actions and
    Link for navigation.
  </p>
</template>

Composition

Typical part hierarchy

Link <a>
├── link text
└── Link.ExternalIcon (optional)

Link asChild (alternative)
└── RouterLink / framework link

Anchors navigate, while buttons perform actions. TheArk UI composition guidedefines the single-child asChild contract.

Examples

Variants

Use inline in prose, current in colored contexts, and plain where layout already identifies navigation.

inlineInline link

currentCurrent-color link

plainPlain link

<script setup>
import { Link } from "@dicehub/kappa/components/link";
</script>

<template>
  <div>
    <Link href="#examples">Inline link</Link>
    <Link href="#accessibility" variant="current">Current-color link</Link>
    <Link href="#api-reference" variant="plain">Plain link</Link>
  </div>
</template>

Inline in Paragraph

An inline link follows the surrounding type scale, line height, and sentence flow.

Review the accessibility guide before you publish a new interface. It covers keyboard access, focus, and contrast.

<script setup>
import { Link } from "@dicehub/kappa/components/link";
</script>

<template>
  <p>
    Review the <Link href="/docs/accessibility">accessibility guide</Link> before
    you publish a new interface. It covers keyboard access, focus, and contrast.
  </p>
</template>

External Link

The external prop supplies safe new-context defaults. LinkExternalIcon is Kappa's built-in decorative indicator; Link.ExternalIcon is the equivalent compound form.

Ark UI composition

<script setup>
import { Link, LinkExternalIcon } from "@dicehub/kappa/components/link";
</script>

<template>
  <Link href="https://ark-ui.com/docs/guides/composition" external>
    Ark UI composition
    <LinkExternalIcon />
  </Link>
</template>

Current Color

The current variant inherits its surrounding semantic color without losing the underline cue.

<script setup>
import { Link } from "@dicehub/kappa/components/link";
</script>

<template>
  <aside class="service-note">
    Scheduled maintenance starts at 18:00 UTC.
    <Link href="#maintenance" variant="current">View details</Link>
  </aside>
</template>

<style scoped>
.service-note {
  color: var(--kappa-info-text);
}
</style>

Router Link

Use asChild with one router component. The child owns its destination and Kappa merges styling and attributes onto it.

Component index

<script setup>
import { RouterLink } from "vue-router";
import { Link } from "@dicehub/kappa/components/link";
</script>

<template>
  <Link as-child>
    <RouterLink to="/settings">Account settings</RouterLink>
  </Link>
</template>

Current Page

Keep native aria-current on the active destination so the state is available beyond color.

<script setup>
import { Link } from "@dicehub/kappa/components/link";
</script>

<template>
  <nav class="section-links" aria-label="Account sections">
    <Link href="/overview" variant="plain">Overview</Link>
    <Link href="/activity" variant="plain" aria-current="page">Activity</Link>
    <Link href="/access" variant="plain">Access</Link>
  </nav>
</template>

<style scoped>
.section-links {
  display: flex;
  gap: 1.25rem;
}
</style>

Right to Left

Logical spacing keeps text and inline content ordered by the inherited writing direction.

راجع إرشادات إمكانية الوصول قبل النشر.

<script setup>
import { Link } from "@dicehub/kappa/components/link";
</script>

<template>
  <p dir="rtl" lang="ar">
    راجع <Link href="#accessibility">إرشادات إمكانية الوصول</Link> قبل النشر.
  </p>
</template>

Accessibility

Use Link only for navigation. Use Button for commands, toggles, and form submission.
Write destination-specific text. Do not use vague text such as “click here.”
Do not simulate a disabled anchor. Remove it, omit its destination, or use the correct control.
Use aria-current="page" for the current destination in a navigation group.
Tell users when a link opens a new context. The external icon is decorative, not an accessible name.
Keep one element inside asChild, and ensure that it renders a semantic link.

API Reference

Link

Renders one anchor by default and forwards native attributes and listeners.

Prop	Type	Default	Description
`href`	`string`	`—`	Sets the native anchor destination. The child owns navigation with asChild.
`variant`	`"inline" \| "current" \| "plain"`	`"inline"`	Selects an underlined accent, inherited underlined, or plain treatment.
`external`	`boolean`	`false`	Defaults target to _blank and merges noopener noreferrer into rel.
`asChild`	`boolean`	`false`	Merges Link attributes and styling onto one child, such as RouterLink.
`native anchor attributes`	`AnchorHTMLAttributes`	`—`	Forwards aria-*, download, hreflang, ping, referrerpolicy, rel, target, and listeners.

Slots

Slot	Description
`default`	Descriptive link text and optional inline content such as Link.ExternalIcon.

Data Attributes

Attribute	Value	Description
`data-slot`	`"link"`	Identifies the rendered link root.
`data-variant`	`"inline" \| "current" \| "plain"`	Exposes the resolved visual treatment.
`data-external`	`present`	Present when external is true.

Exports

Export	Description
`Link`	Ark factory anchor with Link.ExternalIcon composition.
`LinkRoot`	Standalone root component used by the compound Link export.
`LinkExternalIcon`	Named decorative external-link indicator export.
`LinkProps / LinkSlots / LinkVariant`	Public Vue and variant contracts.
`LINK_VARIANTS / LINK_DEFAULT_VARIANT`	Supported variants and default.
`isLinkVariant / resolveLinkVariant`	Guard and safe variant resolver.
`resolveLinkTarget / resolveLinkRel`	Safe external navigation helpers.