---
title: Link
description: Link allows a user to navigate to another page or resource within a web page or application.
thumbnail:
  image: /previews/components/core/link.jpeg
  video: /previews/components/core/link.mp4
links:
  - label: Aria docs
    href: https://react-spectrum.adobe.com/react-aria/Link.html
  - label: Aria API Reference
    href: https://react-spectrum.adobe.com/react-aria/Link.html#props
  - label: Report an issue
    href: https://github.com/mehdibha/dotUI/issues/new/choose
  - label: Edit this page
    href: https://github.com/mehdibha/dotUI/tree/main/content/components/navigation/link.mdx?plain=1
---

<ComponentPreview
  name="core/link-default"
  preview={`<Link href="https://x.com/mehdibha_" target="_blank">
    @mehdibha_
  </Link>`}
/>

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
  
  ```package-install
npx dotui-cli@latest add link
```

  </Tab>
  <Tab value="manual">
  
    <Steps>
      <Step>Install the following dependencies:</Step>

    ```package-install
    react-aria-components
    ```

      <Step>Copy and paste the following code into your project.</Step>
      <ComponentSource name="core/link" />
      <Step>Update the import paths to match your project setup.</Step>
    </Steps>

  </Tab>
</Tabs>

## Options

### Variant

Use the `variant` prop to control the appearance of the link.

<ComponentPreview
  name="core/link-variants"
  preview={`<Link variant="accent" href="https://x.com/mehdibha_" target="_blank">
    @mehdibha_
  </Link>
  <Link variant="quiet" href="https://x.com/mehdibha_" target="_blank">
    @mehdibha_
  </Link>`}
/>

### Disabled

Use the `isDisabled` prop to disable the link.

<ComponentPreview
  name="core/link-disabled"
  preview={`<Link href="https://x.com/mehdibha_" isDisabled>
    @mehdibha_
  </Link>`}
/>

## Examples

### With icon

<ComponentPreview
  name="core/link-icon"
  preview={`<Link href="/docs" target="_blank">
    Docs{" "}
    <span>
      <ExternalLinkIcon className="size-4" />
    </span>
  </Link>`}
/>

## API Reference

| Prop             | Type                                                                                              | Default    | Description                                                                                                 |
| ---------------- | ------------------------------------------------------------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------- |
| `variant`        | `'accent' \| 'quiet'`                                                                             | `'accent'` | The visual style of the Link.                                                                               |
| `isDisabled`     | `boolean`                                                                                         | -          | Whether the link is disabled.                                                                               |
| `autoFocus`      | `boolean`                                                                                         | -          | Whether the element should receive focus on render.                                                         |
| `href`           | `Href`                                                                                            | -          | A URL to link to.                                                                                           |
| `hrefLang`       | `string`                                                                                          | -          | Hints at the human language of the linked URL.                                                              |
| `target`         | `HTMLAttributeAnchorTarget`                                                                       | -          | The target window for the link.                                                                             |
| `rel`            | `string`                                                                                          | -          | The relationship between the linked resource and the current page.                                          |
| `download`       | `boolean \| string`                                                                               | -          | Causes the browser to download the linked URL. A string may be provided to suggest a file name.             |
| `ping`           | `string`                                                                                          | -          | A space-separated list of URLs to ping when the link is followed.                                           |
| `referrerPolicy` | `HTMLAttributeReferrerPolicy`                                                                     | -          | How much of the referrer to send when following the link.                                                   |
| `routerOptions`  | `RouterOptions`                                                                                   | -          | Options for the configured client side router.                                                              |
| `children`       | `ReactNode \| (values: LinkRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode` | -          | The children of the component. A function may be provided to alter the children based on component state.   |
| `className`      | `string`                                                                                          | -          | The CSS className for the element.                                                                          |
| `style`          | `CSSProperties \| (values: LinkRenderProps & {defaultStyle: CSSProperties}) => CSSProperties`     | -          | The inline style for the element. A function may be provided to compute the style based on component state. |

| Event           | Type                              | Description                                                                                                             |
| --------------- | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `onPress`       | `(e: PressEvent) => void`         | Handler that is called when the press is released over the target.                                                      |
| `onPressStart`  | `(e: PressEvent) => void`         | Handler that is called when a press interaction starts.                                                                 |
| `onPressEnd`    | `(e: PressEvent) => void`         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.     |
| `onPressChange` | `(isPressed: boolean) => void`    | Handler that is called when the press state changes.                                                                    |
| `onPressUp`     | `(e: PressEvent) => void`         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| `onFocus`       | `(e: FocusEvent<Target>) => void` | Handler that is called when the element receives focus.                                                                 |
| `onBlur`        | `(e: FocusEvent<Target>) => void` | Handler that is called when the element loses focus.                                                                    |
| `onFocusChange` | `(isFocused: boolean) => void`    | Handler that is called when the element's focus status changes.                                                         |
| `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.                                                                          |
| `onHoverStart`  | `(e: HoverEvent) => void`         | Handler that is called when a hover interaction starts.                                                                 |
| `onHoverEnd`    | `(e: HoverEvent) => void`         | Handler that is called when a hover interaction ends.                                                                   |
| `onHoverChange` | `(isHovering: boolean) => void`   | Handler that is called when the hover state changes.                                                                    |

| Data attribute         | Description                                                  |
| ---------------------- | ------------------------------------------------------------ |
| `[data-current]`       | Whether the link is the current item within a list.          |
| `[data-hovered]`       | Whether the link is currently hovered with a mouse.          |
| `[data-pressed]`       | Whether the link is currently in a pressed state.            |
| `[data-focused]`       | Whether the link is focused, either via a mouse or keyboard. |
| `[data-focus-visible]` | Whether the link is keyboard focused.                        |
| `[data-disabled]`      | Whether the link is disabled.                                |
