Skip to main content
Kobalte
ComponentsChangelog

Link

Since v0.1.0@kobalte/core/linkSourceLink

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

Import

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

Example

Kobalte
import { Link } from "@kobalte/core/link";


export function BasicExample() {
  return (
    <Link class={style.link} href="https://kobalte.dev" target="_blank">
      Kobalte
    </Link>
  );
}
.link {
  font-weight: 600;
  color: hsl(201 96% 32%);
}


.link:hover {
  text-decoration: underline;
}


.link[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}


.link[data-disabled]:hover {
  text-decoration: none;
}


[data-theme*="dark"] .link {
  color: hsl(198 93% 60%);
}

Usage

Disabled state

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

Kobalte
<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).

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.

Last updated: 7/16/26, 7:09 AM