# Link

Navigates to a URL or route.

## Examples

### Default

```tsx
import { Link } from '@var-ui/react';

<Link href="#">Documentation</Link>
```

```astro
---
import { Link } from '@var-ui/astro';
---

<Link href="#">Documentation</Link>
```

```html
<a href="#" class="var-ui-link">Documentation</a>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| aria-describedby | string \| undefined | no |  | Identifies the element (or elements) that describes the object. |
| aria-details | string \| undefined | no |  | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | string \| undefined | no |  | Defines a string value that labels the current element. |
| aria-labelledby | string \| undefined | no |  | Identifies the element (or elements) that labels the current element. |
| autoFocus | boolean \| undefined | no |  | Whether the element should receive focus on render. |
| children | ChildrenOrFunction<LinkRenderProps> | no |  | The children of the component. A function may be provided to alter the children based on component state. |
| dir | string \| undefined | no |  |  |
| download | string \| boolean \| undefined | no |  | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). |
| hidden | boolean \| undefined | no |  |  |
| href | string \| undefined | no |  | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| hrefLang | string \| undefined | no |  | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang). |
| id | string \| undefined | no |  | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| inert | boolean \| undefined | no |  |  |
| isDisabled | boolean \| undefined | no |  | Whether the link is disabled. |
| lang | string \| undefined | no |  |  |
| onAnimationEnd | AnimationEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onAnimationEndCapture | AnimationEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onAnimationIteration | AnimationEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onAnimationIterationCapture | AnimationEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onAnimationStart | AnimationEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onAnimationStartCapture | AnimationEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onAuxClick | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onAuxClickCapture | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onBlur | ((e: FocusEvent<Element, Element>) => void) \| undefined | no |  | Handler that is called when the element loses focus. |
| onClick | ((e: MouseEvent<FocusableElement, MouseEvent>) => void) \| undefined | no |  | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onContextMenu | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onContextMenuCapture | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onDoubleClick | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onDoubleClickCapture | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onFocus | ((e: FocusEvent<Element, Element>) => void) \| undefined | no |  | Handler that is called when the element receives focus. |
| onFocusChange | ((isFocused: boolean) => void) \| undefined | no |  | Handler that is called when the element's focus status changes. |
| onGotPointerCapture | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onGotPointerCaptureCapture | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onHoverChange | ((isHovering: boolean) => void) \| undefined | no |  | Handler that is called when the hover state changes. |
| onHoverEnd | ((e: HoverEvent) => void) \| undefined | no |  | Handler that is called when a hover interaction ends. |
| onHoverStart | ((e: HoverEvent) => void) \| undefined | no |  | Handler that is called when a hover interaction starts. |
| onKeyDown | ((e: KeyboardEvent) => void) \| undefined | no |  | Handler that is called when a key is pressed. |
| onKeyUp | ((e: KeyboardEvent) => void) \| undefined | no |  | Handler that is called when a key is released. |
| onLostPointerCapture | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onLostPointerCaptureCapture | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseDown | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseDownCapture | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseEnter | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseLeave | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseMove | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseMoveCapture | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseOut | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseOutCapture | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseOver | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseOverCapture | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseUp | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onMouseUpCapture | MouseEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerCancel | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerCancelCapture | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerDown | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerDownCapture | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerEnter | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerLeave | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerMove | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerMoveCapture | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerOut | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerOutCapture | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerOver | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerOverCapture | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerUp | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPointerUpCapture | PointerEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onPress | ((e: PressEvent) => void) \| undefined | no |  | Handler that is called when the press is released over the target. |
| onPressChange | ((isPressed: boolean) => void) \| undefined | no |  | Handler that is called when the press state changes. |
| onPressEnd | ((e: PressEvent) => void) \| undefined | no |  | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| onPressStart | ((e: PressEvent) => void) \| undefined | no |  | Handler that is called when a press interaction starts. |
| onPressUp | ((e: PressEvent) => void) \| undefined | no |  | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| onScroll | UIEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onScrollCapture | UIEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTouchCancel | TouchEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTouchCancelCapture | TouchEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTouchEnd | TouchEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTouchEndCapture | TouchEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTouchMove | TouchEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTouchMoveCapture | TouchEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTouchStart | TouchEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTouchStartCapture | TouchEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTransitionCancel | TransitionEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTransitionCancelCapture | TransitionEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTransitionEnd | TransitionEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTransitionEndCapture | TransitionEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTransitionRun | TransitionEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTransitionRunCapture | TransitionEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTransitionStart | TransitionEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onTransitionStartCapture | TransitionEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onWheel | WheelEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| onWheelCapture | WheelEventHandler<HTMLAnchorElement> \| undefined | no |  |  |
| ping | string \| undefined | no |  | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping). |
| referrerPolicy | HTMLAttributeReferrerPolicy \| undefined | no |  | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). |
| rel | string \| undefined | no |  | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| render | ((props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> \| DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, renderProps: LinkRenderProps) => ReactElement<...>) \| undefined | no |  | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.  Note: You can check if `'href' in props` in order to tell whether to render an `<a>` element.  Requirements:  - You must render the expected element type (e.g. if `<a>` is expected, you cannot render a   `<button>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop   as appropriate. |
| routerOptions | undefined | no |  | Options for the configured client side router. |
| slot | string \| null \| undefined | no |  | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| style | StyleOrFunction<LinkRenderProps> \| undefined | no |  | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| target | HTMLAttributeAnchorTarget \| undefined | no |  | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| translate | "yes" \| "no" \| undefined | no |  |  |

## Accessibility

Built on React Aria Components where applicable.