Kobalte.v0.12.5

Link

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

Import

ts
import { Link } from "@kobalte/core";
ts
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.Root: The root container for a link.
tsx
<Link.Root />
tsx
<Link.Root />

Example

Usage

Disabled state

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

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

API Reference

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
Link.Roota

Accessibility

Keyboard Interactions

KeyDescription
EnterActivates the link.
Previous
Image
Next
Menubar