# Link

## Essence

Semantic inline navigation text styled with Portfolio design-system tokens.

`Link` is the default text-link component for moving a user to another URL or route while preserving native anchor behavior.

## Hook

Use when text itself is the interactive navigation affordance.

## Internal Rules

- Renders an `<a>` element.
- Uses `href` unless disabled.
- Uses design-system accent color and body typography tokens.
- Keeps underline visible by default.
- Uses focus tokens for keyboard focus.
- Uses `noreferrer` automatically when `target="_blank"` and no custom `rel` is provided.
- Disabled state removes `href`, sets `aria-disabled="true"`, sets `tabindex="-1"`, and disables pointer interaction.

## Use When

- Text should navigate to another page, route, document, or external URL.
- Inline copy needs an obvious clickable text affordance.
- The interaction should remain native anchor navigation.

## Do Not Use When

- The action mutates state instead of navigating.
- The control should look and behave like a button.
- The visible label is not text.
- The link is part of a menu item that needs `MenuItem` semantics.

## Edge Cases

- External links should confirm whether `target="_blank"` is needed.
- Disabled links are intentionally removed from tab order.
- The current visited state uses the same accent color as the default state.
- Long link text should be checked in narrow containers.

## Accessibility Notes

- Link text should describe the destination.
- Disabled state uses `aria-disabled`, removes keyboard focus, and removes `href`.
- Focus and focus-visible states use design-system focus tokens.
- Do not use `Link` for non-navigation actions.

## Related Components And Patterns

- `MenuItem`: use for navigation inside structured menus.
- `Paragraph`: can contain inline `Link` instances.
- Focus tokens: govern keyboard focus appearance.

## Code Paths

- `packages/design-system/src/components/Link.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`