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