---
title: LinkBox
description: "`LinkBox` is a component that allows elements such as articles or cards to function as a single link."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/link-box/link-box.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/link-box
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-linkbox--basic
---

```tsx
<LinkBox.Root
  as="article"
  layerStyle="panel"
  alignItems="flex-start"
  display="flex"
  flexDirection="column"
  gap="sm"
  p="md"
  rounded="l2"
>
  <Text>荒川弘</Text>

  <Heading size="2xl">
    <LinkBox.Overlay
      href="https://ja.wikipedia.org/wiki/%E9%8B%BC%E3%81%AE%E9%8C%AC%E9%87%91%E8%A1%93%E5%B8%AB"
      external
    >
      鋼の錬金術師
    </LinkBox.Overlay>
  </Heading>

  <Text>
    『鋼の錬金術師』（FULL METAL
    ALCHEMIST）は、荒川弘による日本の漫画作品。『月刊少年ガンガン』（スクウェア・エニックス）において、2001年8月号から2010年7月号まで連載された。全108話。同年10月号には番外編が掲載された。略称は「ハガレン」。
  </Text>
</LinkBox.Root>
```

## Usage

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

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

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

```tsx
<LinkBox.Root>
  <LinkBox.Overlay />
</LinkBox.Root>
```

### Nested Links

```tsx
<LinkBox.Root
  as="article"
  layerStyle="panel"
  alignItems="flex-start"
  display="flex"
  flexDirection="column"
  gap="sm"
  p="md"
  rounded="l2"
>
  <Text>荒川弘</Text>

  <Heading size="2xl">
    <LinkBox.Overlay
      href="https://ja.wikipedia.org/wiki/%E9%8B%BC%E3%81%AE%E9%8C%AC%E9%87%91%E8%A1%93%E5%B8%AB"
      external
    >
      鋼の錬金術師
    </LinkBox.Overlay>
  </Heading>

  <Text>
    『鋼の錬金術師』（FULL METAL
    ALCHEMIST）は、荒川弘による日本の漫画作品。『月刊少年ガンガン』（スクウェア・エニックス）において、2001年8月号から2010年7月号まで連載された。全108話。同年10月号には番外編が掲載された。略称は「ハガレン」。
  </Text>

  <Link href="https://www.hagaren.jp/" external>
    TVアニメオフィシャルサイト
  </Link>
</LinkBox.Root>
```

## Props

### LinkBox.Root

| 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.                |

### LinkBox.Overlay

| 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.                |
| `external`    | `false` | `boolean`                                                                                                                 | If `true`, the link will open in new tab.  |