# 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](https://www.w3.org/WAI/ARIA/apg/patterns/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](https://kobalte.dev/)

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`<br> 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[←Image](https://kobalte.dev/docs/core/components/image)Next[Menubar→](https://kobalte.dev/docs/core/components/menubar)