## Import

```jsx
import { Link } from "@cfa/react-core";
```

## Live Editor

```jsx
<Link href="#">I am a link</Link>
```

## Examples

### Disabled

The `isDisabled` prop can be used to disable the link. This will prevent the link from being clickable and will apply a disabled style.

```jsx
<Link href="#" isDisabled>
  I am a disabled link
</Link>
```

### Inline

The `inline` prop can be used to display the link inline with other elements. This will remove the default block display style.

```jsx
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque nulla{" "}
  <Link href="#" inline>
    I am an inline link
  </Link>{" "}
  rerum iure at distinctio maiores natus sit esse. Asperiores, corrupti.
</p>
```

### With Icon

```jsx
<Link href="#">
  Link with Icon
  <ExternalLink />
</Link>
```

## Props

### link

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| inline | `boolean` | - | - |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| autoFocus | `boolean` | - | 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. |
| className | `ClassNameOrFunction<LinkRenderProps>` | `'react-aria-Link'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir | `string` | - | - |
| download | `string \ | boolean` | - | 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` | - | - |
| href | `string` | - | A URL to link to. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| hrefLang | `string` | - | 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` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| inert | `boolean` | - | - |
| isDisabled | `boolean` | - | Whether the link is disabled. |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLAnchorElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onBlur | `(e: FocusEvent<Element, Element>) => void` | - | Handler that is called when the element loses focus. |
| onClickCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onFocus | `(e: FocusEvent<Element, Element>) => void` | - | Handler that is called when the element receives focus. |
| onFocusChange | `(isFocused: boolean) => void` | - | Handler that is called when the element's focus status changes. |
| onGotPointerCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onHoverChange | `(isHovering: boolean) => void` | - | Handler that is called when the hover state changes. |
| onHoverEnd | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction ends. |
| onHoverStart | `(e: HoverEvent) => void` | - | Handler that is called when a hover interaction starts. |
| onKeyDown | `(e: KeyboardEvent) => void` | - | Handler that is called when a key is pressed. |
| onKeyUp | `(e: KeyboardEvent) => void` | - | Handler that is called when a key is released. |
| onLostPointerCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLAnchorElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLAnchorElement>` | - | - |
| onPress | `(e: PressEvent) => void` | - | Handler that is called when the press is released over the target. |
| onPressChange | `(isPressed: boolean) => void` | - | Handler that is called when the press state changes. |
| onPressEnd | `(e: PressEvent) => void` | - | Handler that is called when a press interaction ends, either&#xA;over the target or when the pointer leaves the target. |
| onPressStart | `(e: PressEvent) => void` | - | Handler that is called when a press interaction starts. |
| onPressUp | `(e: PressEvent) => void` | - | Handler that is called when a press is released over the target, regardless of&#xA;whether it started on the target or not. |
| onScroll | `UIEventHandler<HTMLAnchorElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLAnchorElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLAnchorElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLAnchorElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLAnchorElement>` | - | - |
| ping | `string` | - | 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` | - | 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` | - | 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: any, renderProps: LinkRenderProps) => ReactElement<unknown, string \ | JSXElementConstructor<any>>` | - | Overrides the default DOM element with a custom render function.&#xA;This allows rendering existing components with built-in styles and behaviors&#xA;such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Note: You can check if \`'href' in props\` in order to tell whether to render an \`\<a>\` element.&#xA;&#xA;Requirements:&#xA;&#xA;\* You must render the expected element type (e.g. if \`\<a>\` is expected, you cannot render a \`\<button>\`).&#xA;\* Only a single root DOM element can be rendered (no fragments).&#xA;\* You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| routerOptions | `never` | - | Options for the configured client side router. |
| slot | `string` | - | A slot name for the component. Slots allow the component to receive props from a parent component.&#xA;An explicit \`null\` value indicates that the local props completely override all props received from a parent. |
| style | `StyleOrFunction<LinkRenderProps>` | - | 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` | - | The target window for the link. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| translate | `"yes" \ | "no"` | - | - |