# Link

> Takes the reader to another page, within a sentence or on its own.

- **Level**: atom · **Status**: stable · **Role**: navigation
- **Import**: `import { Link } from "@rrios-forge/ui/atoms/link";`
- **Source**: `packages/ui/src/atoms/link`

Accessible navigation/text action. `presentation` controls the underline rule (`inline` links flow and wrap with the sentence; the underline is quiet at rest and full on hover — hover never fades the colour); `tone` controls colour emphasis. Distinguishability never relies on colour alone — focus ring + underline carry the signal. External links show an arrow icon outside the underline plus an sr-only hint.

## Use it for

- Link styled as a button → `Link className={buttonVariants({ intent, variant, size })}`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `presentation` | — | `inline` `standalone` `subtle` | `inline` | How the same thing is staged. |
| `tone` | — | `neutral` `muted` `danger` | — | Which semantic colour family the element speaks in. |

## Stories

- [Playground](/?path=/story/components-atoms-link--playground) · frame: `/iframe.html?id=components-atoms-link--playground&viewMode=story`
- [Variants](/?path=/story/components-atoms-link--variants) · frame: `/iframe.html?id=components-atoms-link--variants&viewMode=story`
- [Tones](/?path=/story/components-atoms-link--tones) · frame: `/iframe.html?id=components-atoms-link--tones&viewMode=story`
- [External](/?path=/story/components-atoms-link--external) · frame: `/iframe.html?id=components-atoms-link--external&viewMode=story`
- [Focus state](/?path=/story/components-atoms-link--focus-state) · frame: `/iframe.html?id=components-atoms-link--focus-state&viewMode=story`
- [asChild · framework Link](/?path=/story/components-atoms-link--as-child-with-link) · frame: `/iframe.html?id=components-atoms-link--as-child-with-link&viewMode=story`
- [asChild · prevents browser navigation](/?path=/story/components-atoms-link--as-child-prevents-navigation) — interaction test · frame: `/iframe.html?id=components-atoms-link--as-child-prevents-navigation&viewMode=story`

## Decisions that name it

- ADR-002 — Component variants live in `variants.ts` and export their option metadata
- ADR-017 — Actionable components adopt the `asChild` slot pattern for framework-aware routing
- ADR-028 — The label is not the fill
- ADR-046 — Markdown is painted with atoms, and apps fill its slots

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).