Link

Navigates to a URL or route.

Examples

Default

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

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

Props

Accessibility

Built on React Aria Components where applicable.

Props

Prop	Type	Default	Description
`className`	`string \| undefined`	—	Additional CSS class names merged onto the root element.

React Aria props

Prop	Type	Default	Description
`aria-describedby`	`string \| undefined`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string \| undefined`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string \| undefined`	—	Identifies the element (or elements) that labels the current element.
`autoFocus`	`boolean \| undefined`	—	Whether the element should receive focus on render.
`children`	`ChildrenOrFunction<LinkRenderProps>`	—	The children of the component. A function may be provided to alter the children based on component state.
`dir`	`string \| undefined`	—	—
`download`	`string \| boolean \| undefined`	—	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`	—	—
`href`	`string \| undefined`	—	A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
`hrefLang`	`string \| undefined`	—	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`	—	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	`boolean \| undefined`	—	—
`isDisabled`	`boolean \| undefined`	—	Whether the link is disabled.
`lang`	`string \| undefined`	—	—
`onAnimationEnd`	`AnimationEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onAnimationEndCapture`	`AnimationEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onAnimationIteration`	`AnimationEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onAnimationIterationCapture`	`AnimationEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onAnimationStart`	`AnimationEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onAnimationStartCapture`	`AnimationEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onAuxClick`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onAuxClickCapture`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onBlur`	`((e: FocusEvent<Element, Element>) => void) \| undefined`	—	Handler that is called when the element loses focus.
`onClick`	`((e: MouseEvent<FocusableElement, MouseEvent>) => void) \| undefined`	—	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`	—	—
`onContextMenu`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onContextMenuCapture`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onDoubleClick`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onDoubleClickCapture`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onFocus`	`((e: FocusEvent<Element, Element>) => void) \| undefined`	—	Handler that is called when the element receives focus.
`onFocusChange`	`((isFocused: boolean) => void) \| undefined`	—	Handler that is called when the element's focus status changes.
`onGotPointerCapture`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onGotPointerCaptureCapture`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onHoverChange`	`((isHovering: boolean) => void) \| undefined`	—	Handler that is called when the hover state changes.
`onHoverEnd`	`((e: HoverEvent) => void) \| undefined`	—	Handler that is called when a hover interaction ends.
`onHoverStart`	`((e: HoverEvent) => void) \| undefined`	—	Handler that is called when a hover interaction starts.
`onKeyDown`	`((e: KeyboardEvent) => void) \| undefined`	—	Handler that is called when a key is pressed.
`onKeyUp`	`((e: KeyboardEvent) => void) \| undefined`	—	Handler that is called when a key is released.
`onLostPointerCapture`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onLostPointerCaptureCapture`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseDown`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseDownCapture`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseEnter`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseLeave`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseMove`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseMoveCapture`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseOut`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseOutCapture`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseOver`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseOverCapture`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseUp`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onMouseUpCapture`	`MouseEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerCancel`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerCancelCapture`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerDown`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerDownCapture`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerEnter`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerLeave`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerMove`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerMoveCapture`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerOut`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerOutCapture`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerOver`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerOverCapture`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerUp`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPointerUpCapture`	`PointerEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onPress`	`((e: PressEvent) => void) \| undefined`	—	Handler that is called when the press is released over the target.
`onPressChange`	`((isPressed: boolean) => void) \| undefined`	—	Handler that is called when the press state changes.
`onPressEnd`	`((e: PressEvent) => void) \| undefined`	—	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`	—	Handler that is called when a press interaction starts.
`onPressUp`	`((e: PressEvent) => void) \| undefined`	—	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`	—	—
`onScrollCapture`	`UIEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTouchCancel`	`TouchEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTouchCancelCapture`	`TouchEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTouchEnd`	`TouchEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTouchEndCapture`	`TouchEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTouchMove`	`TouchEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTouchMoveCapture`	`TouchEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTouchStart`	`TouchEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTouchStartCapture`	`TouchEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTransitionCancel`	`TransitionEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTransitionCancelCapture`	`TransitionEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTransitionEnd`	`TransitionEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTransitionEndCapture`	`TransitionEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTransitionRun`	`TransitionEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTransitionRunCapture`	`TransitionEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTransitionStart`	`TransitionEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onTransitionStartCapture`	`TransitionEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onWheel`	`WheelEventHandler<HTMLAnchorElement> \| undefined`	—	—
`onWheelCapture`	`WheelEventHandler<HTMLAnchorElement> \| undefined`	—	—
`ping`	`string \| undefined`	—	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`	—	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`	—	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`	—	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`	—	Options for the configured client side router.
`slot`	`string \| null \| undefined`	—	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`	—	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`	—	The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
`translate`	`"yes" \| "no" \| undefined`	—	—

Theme this component via createDesignTheme({ components: { link: … } }). See Customize for the full override API.

Public classes and data attributes from @var-ui/core link().

Name	Example	Description
`class`	`var-ui-link`	Root / part class name

Apply via `recipeProps(recipe(…))` or copy the class / data attributes onto your markup.