---
title: Link
description: "`Link` is a component for creating hyperlinks to different web pages, locations within the same page, or other URLs."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/link/link.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/link
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-link--basic
---

```tsx
<Link href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB">
  ドラゴンボール - wikipedia
</Link>
```

## Usage

```tsx
import { Link } from "@yamada-ui/react"
```

```tsx
import { Link } from "@/components/ui"
```

```tsx
import { Link } from "@workspaces/ui"
```

```tsx
<Link />
```

### Change variant

```tsx
<Wrap gap="md">
  <For each={["plain", "underline"]}>
    {(variant) => (
      <Link
        key={variant}
        variant={variant}
        href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB"
      >
        ドラゴンボール - wikipedia
      </Link>
    )}
  </For>
</Wrap>
```

### Change Color Scheme

```tsx
<Wrap gap="md">
  <For each={["success", "warning", "link"]}>
    {(colorScheme) => (
      <Link
        key={colorScheme}
        colorScheme={colorScheme}
        href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB"
      >
        ドラゴンボール - wikipedia
      </Link>
    )}
  </For>
</Wrap>
```

### External Links

```tsx
<Link
  href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A9%E3%82%B4%E3%83%B3%E3%83%9C%E3%83%BC%E3%83%AB"
  external
>
  ドラゴンボール - wikipedia
</Link>
```

## Props

| Prop          | Default   | Type                                                                                                                      | Description                                |
| ------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -         | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -         | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -         | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -         | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `variant`     | `"plain"` | `"plain" \| "underline"`                                                                                                  | The variant of the component.              |
| `external`    | `false`   | `boolean`                                                                                                                 | If `true`, the link will open in new tab.  |