Kobalte.v0.13.7

Link

Allows a user to navigate to another page or resource within a web page or application.

Import

ts
import { Link } from "@kobalte/core/link";
// or
import { Root } from "@kobalte/core/link";
// or (deprecated)
import { Link } from "@kobalte/core";
ts
import { Link } from "@kobalte/core/link";
// or
import { Root } from "@kobalte/core/link";
// or (deprecated)
import { Link } from "@kobalte/core";

Features

  • Native HTML <a> element support.
  • Custom element type support via the WAI ARIA Link design pattern.
  • Support for disabled links.

Anatomy

The link consists of:

  • Link: The root container for a link.
tsx
<Link />
tsx
<Link />

Example

Usage

Disabled state

Use the disabled prop to disable a link while keeping it accessible for screen readers.

tsx
<Link href="https://kobalte.dev" disabled>
Kobalte
</Link>
tsx
<Link href="https://kobalte.dev" disabled>
Kobalte
</Link>

API Reference

Link is equivalent to the Root import from @kobalte/core/link (and deprecated Link.Root).

PropDescription
disabledboolean
Whether the link is disabled. Native navigation will be disabled, and the link will be exposed as disabled to assistive technology.
Data attributeDescription
data-disabledPresent when the link is disabled.

Rendered elements

ComponentDefault rendered element
Linka

Accessibility

Keyboard Interactions

KeyDescription
EnterActivates the link.
Previous
Image
Next
Menubar