---
title: "Link"
description: "The link is the basic unit of navigation. It declares an href and decides whether the destination is external so it can open a new tab, add rel and show a decorative icon."
kind: component
id: C-005
registry: "link"
docs: "https://koten.codehive.com.co/components/link"
markdown: "https://koten.codehive.com.co/md/components/link.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/link.json"
language: en
---

# Link · リンク

> Component C-005 in the Koten UI catalog.

The link is the basic unit of navigation. It declares an href and decides whether the destination is external so it can open a new tab, add rel and show a decorative icon.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/link.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/link.json
```

## Files

- `@/components/ui/link.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### Detection and variants

An http(s) href opens in a new tab with rel and an icon; showExternalIcon hides the icon without changing the destination.

```tsx
<Link href="/tokens">Internal tokens</Link>
<Link href="https://example.com">External example</Link>
<Link href="https://example.com" showExternalIcon={false}>
  Without icon
</Link>
```

### Inside a paragraph

The underline keeps the link recognizable without competing with the surrounding text.

```tsx
<p className="max-w-prose text-xs leading-relaxed text-muted">
  Read the <Link href="/docs/decisions">design decisions</Link> or open the{" "}
  <Link href="https://base-ui.com">Base UI reference</Link>.
</p>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `href` | `string` | `—` | Required. When it matches http(s) or //, the link is treated as external. |
| `external` | `boolean` | `auto` | Forces external mode; when omitted it is detected from href. |
| `showExternalIcon` | `boolean` | `true` | Shows the icon only on external links. |
| `className` | `string` | `—` | Merges with the base styles instead of replacing them. |

## Accessibility

- The link is recognized by underline and color; never by color alone.
- The text describes the destination; avoid labels such as “click here”.
- External links open in a new tab with rel="noreferrer" and add an aria-hidden icon.
- Visible focus uses a 2 px outline with a 1 px offset on the focus token.

## Sources

- Catalog page: https://koten.codehive.com.co/components/link
- Markdown: https://koten.codehive.com.co/md/components/link.md
- Repository: https://github.com/codehive-colombia/koten