PettyUI/.firecrawl/kobalte.dev-docs-core-components-link.md

Link

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

Import

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

Copyts
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.

Copytsx
<Link />

Copytsx
<Link />

Example

Kobalte

index.tsxstyle.css

Copytsx
import { Link } from "@kobalte/core/link";
import "./style.css";

function App() {
  return (
    <Link class="link" href="https://kobalte.dev">
      Kobalte
    </Link>
  );
}

Copytsx
import { Link } from "@kobalte/core/link";
import "./style.css";

function App() {
  return (
    <Link class="link" href="https://kobalte.dev">
      Kobalte
    </Link>
  );
}

Usage

Disabled state

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

Kobalte

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

Copytsx
<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.

Previous←ImageNextMenubar→