import {
  Canvas,
  Controls,
  Meta,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as LinkStories from './Link.stories'
import { LifecycleTag } from '../../docs/components/LifecycleTag'

<Meta of={LinkStories} />

<Title>Link</Title>
<Subtitle>
  Unstyled base component for navigation links. Renders an `&lt;a&gt;` element
  by default.
</Subtitle>
<LifecycleTag variant="Stable" />
**Component type:** Primitive

<Canvas of={LinkStories.Default} layout="padded" sourceState="shown" />
<Controls of={LinkStories.Default} />

## When to use

Use `Link` when you need navigation behavior without visual styling, or when composing with a framework router (e.g. Next.js `Link`). For styled inline text links, use `TextLink` instead.

## Import

```tsx
import { Link } from '@chainlink/blocks'
```

## Anatomy

```tsx
<Link href="/dashboard">Dashboard</Link>
```

## Using asChild

`asChild` merges `Link` props onto a child element via Radix Slot. Use it to compose with framework-specific link components while keeping `Link`'s `external` and `newTab` behavior.

```tsx
import NextLink from 'next/link'
;<Link href="/dashboard" asChild>
  <NextLink href="/dashboard">Dashboard</NextLink>
</Link>
```

## Examples

### External link

<Canvas of={LinkStories.ExternalLink} layout="padded" sourceState="shown" />

### New tab

<Canvas of={LinkStories.NewTab} layout="padded" sourceState="shown" />

### With asChild

<Canvas of={LinkStories.WithAsChild} layout="padded" sourceState="shown" />

## Related components

- `TextLink` for styled inline text links with optional arrow icons