# Link

> Navigates to another page or resource, inline in text or on its own.

Category: Typography · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/link

Use Link for navigation and Button for actions. Inline links are underlined so they can be told apart without colour. External links open in a new tab, carry rel="noopener noreferrer", and tell screen-reader users that a new tab will open. Use `asChild` to style your router’s link component.

## Import

```tsx
import { Link } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Inline

```tsx
import { Link, Text } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Text size="sm">
      By continuing you agree to the <Link href="#terms">Terms of service</Link> and{' '}
      <Link href="#privacy">Privacy policy</Link>.
    </Text>
  );
}
```

### Variants

```tsx
import { Link, Stack, Text } from '@bindshq/stance-react';

export function Variants() {
  return (
    <Stack gap={3}>
      <Text size="sm">
        Inline: read the <Link href="#guide">deployment guide</Link>.
      </Text>
      <Link href="#templates" variant="standalone">
        View all templates →
      </Link>
      <Text size="sm" tone="muted">
        Subtle: owned by{' '}
        <Link href="#user" variant="subtle">
          Priya Raman
        </Link>
      </Text>
    </Stack>
  );
}
```

### External

```tsx
import { Link } from '@bindshq/stance-react';

export function External() {
  return (
    <Link href="https://binds.si" external variant="standalone">
      Visit binds.si
    </Link>
  );
}
```

### With a router

Pass your framework’s link as the child, e.g. Next.js <Link>.

```tsx
import { Link } from '@bindshq/stance-react';

export function RouterLink() {
  return (
    <Link asChild variant="standalone">
      <a href="#dashboard">Go to dashboard</a>
    </Link>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Link | `variant` | `'inline' \| 'standalone' \| 'subtle'` | `'inline'` | Visual style. |
| Link | `external` | `boolean` | None | Open in a new tab with icon and announcement. Defaults to true when target="_blank". |
| Link | `asChild` | `boolean` | `false` | Style a router link component. |
| Link | `...props` | `AnchorHTMLAttributes` | None | All native anchor attributes. |

## Accessibility

- Inline links are underlined, so they are distinguishable without colour (WCAG 1.4.1).
- External links announce ", opens in a new tab" and include rel="noopener noreferrer".
- Focus shows a 2px outline offset from the text.

## Keyboard

| Keys | Action |
| --- | --- |
| `Enter` | Follows the link. |

## Guidelines

**Do**

- Write link text that makes sense out of context.

**Don’t**

- Use “click here”.
- Use a link to perform an action; use Button.

## Related

- https://stanceui.com/components/button