131 lines
2.2 KiB
Markdown
131 lines
2.2 KiB
Markdown
# 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) |