# Link

> The styled anchor primitive. Wraps `<a>` with the UIKit hover/focus ring and a `block` flag for full-width link rows.

- Category: primitive
- Status: stable (since 0.1.0)
- A11y pattern: https://www.w3.org/WAI/ARIA/apg/patterns/link/
- Tokens: --link-foreground, --link-hover-foreground, --focus-outline
- Playground: https://design.freecodecamp.org/playground#link
- npm dependencies: `react@>=18 <20`
- Registry dependencies: [theme](https://design.freecodecamp.org/registry/theme.md)
- Files:
  - `Link.tsx` → `src/ui/link/Link.tsx` (raw: https://design.freecodecamp.org/registry/link/Link.tsx)
  - `link.css` → `src/ui/link/link.css` (raw: https://design.freecodecamp.org/registry/link/link.css)

## Install (copy source)

1. Ensure the theme is installed once per project - tokens.css + base.css imported globally, fonts available. See https://design.freecodecamp.org/registry/theme.md and https://design.freecodecamp.org/registry/starter.md.
2. Copy the files below into `src/ui/link/` (adjust to your project layout) and import the CSS once from your global stylesheet, e.g. `@import './ui/link/link.css';`.
3. Colors, spacing and type come from tokens - tailor the component by editing the copied source; recolour by editing tokens.css, not the component CSS.

## Usage

`<Link>` is the styled anchor. It forwards every native anchor
attribute and adds a `block` boolean so the anchor can own an entire
row - navigation menus, card-wide click targets.

## Keyboard

| Key   | Action                                     |
| ----- | ------------------------------------------ |
| Enter | Activates the link (native browser).       |
| Tab   | Moves focus to the next focusable element. |

## Accessibility

Renders a native `<a>`, so assistive tech treats it like a link and not
a button. Use `<Button>` for actions that change state on the current
page - don't weaponise links for that purpose.

## Example

```tsx
import { Link } from './ui/link/Link';

<p>Explore the <Link href="#tokens">token layer</Link> to recolor every component.</p>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `block` | `boolean` | no | `false` |  |

## Source: Link.tsx

```tsx
import React, { forwardRef } from 'react';

export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  block?: boolean;
}

export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  ({ block = false, className = '', children, ...rest }, ref) => {
    const classes = ['fcc-link', block && 'fcc-link--block', className]
      .filter(Boolean)
      .join(' ');
    return (
      <a ref={ref} className={classes} {...rest}>
        {children}
      </a>
    );
  }
);
Link.displayName = 'Link';
```

## Source: link.css

```css
.fcc-link {
  color: var(--highlight-color);
  text-decoration: underline;
  text-underline-offset: 0.1em;
}
.fcc-link:hover {
  color: var(--foreground-primary);
}
.fcc-link--block {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
}
.fcc-link--block:hover {
  background: var(--background-tertiary);
}
```

## HTML / vanilla variant

```html
<a class="fcc-link" href="#tokens">token layer</a>
```

Interactive behaviours for plain HTML come from the vanilla runtime (data-uikit-* attributes): https://design.freecodecamp.org/registry/vanilla.md - or download https://design.freecodecamp.org/cdn/uikit.global.js once and self-host it (do not hotlink).

## For coding agents

This library is distributed as copyable source, not an npm package. Start at https://design.freecodecamp.org/registry/starter.md, discover components via https://design.freecodecamp.org/llms.txt, and copy files into the consuming project. Keep token names intact; recolour by editing the copied tokens.css.