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

Kobalte

Usage

Disabled state

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

Kobalte

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

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

API Reference

Link

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

Prop	Description
disabled	`boolean` Whether the link is disabled. Native navigation will be disabled, and the link will be exposed as disabled to assistive technology.

Data attribute	Description
data-disabled	Present when the link is disabled.

Rendered elements

Component	Default rendered element
`Link`	`a`

Accessibility

Keyboard Interactions

Key	Description
`Enter`	Activates the link.