Link
Allows a user to navigate to another page or resource within a web page or application.
Import
tsimport { Link } from "@kobalte/core";
tsimport { 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
| 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.Root | a | 
Accessibility
Keyboard Interactions
| Key | Description | 
|---|---|
| Enter | Activates the link. |