> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Link

The navigation member of the Actions family — a styled `<a>` that takes the reader somewhere. If activating it changes where you are it is a `Link`; if it does something in place it is a `Button`, however text-like it looks. `type` is semantic, so never hand-colour a link, and the hover underline is automatic. Link text has to describe its destination — “Click here” and “Learn more” read as nothing in a screen reader’s link list.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Link) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/navigation-link--overview)

```tsx
import { Link } from '@wallarm-org/design-system/Link';

export const Basic = () => <Link href='#'>Link</Link>;
```

## Usage

```tsx
import { Link } from '@wallarm-org/design-system/Link';
```

## Examples

### Types

`default`, `alt` and `muted`. `alt` is the inverted family for dark surfaces, which is why it barely reads here; the fourth type, `table`, is the master-cell title link and only belongs there.

```tsx
import { Link } from '@wallarm-org/design-system/Link';
import { VStack } from '@wallarm-org/design-system/Stack';

export const Types = () => (
  <VStack>
    <Link href='#' type='default'>
      Link
    </Link>

    <Link href='#' type='alt'>
      Link
    </Link>

    <Link href='#' type='muted'>
      Link
    </Link>
  </VStack>
);
```

### Weight

`medium` where the surrounding copy is heavier, or to lift a standalone link — there is no bold, so `medium` is as far as it goes.

```tsx
import { Link } from '@wallarm-org/design-system/Link';
import { VStack } from '@wallarm-org/design-system/Stack';

export const Weight = () => (
  <VStack>
    <Link href='#' weight='regular'>
      Link
    </Link>

    <Link href='#' weight='medium'>
      Link
    </Link>
  </VStack>
);
```

### Sizes

`xs` to `xl`, each matched to a text size. An inline link takes the scale of the copy around it rather than being sized on its own.

```tsx
import { Link } from '@wallarm-org/design-system/Link';
import { VStack } from '@wallarm-org/design-system/Stack';

export const Sizes = () => (
  <VStack>
    <Link href='#' size='xl'>
      Link
    </Link>

    <Link href='#' size='lg'>
      Link
    </Link>

    <Link href='#' size='md'>
      Link
    </Link>

    <Link href='#' size='sm'>
      Link
    </Link>

    <Link href='#' size='xs'>
      Link
    </Link>
  </VStack>
);
```

### Icons

Icons are children, not a prop. A trailing icon is the direction cue — the external-link mark for a new tab, an arrow for “explore” — and a new tab still needs `target` and `rel` set by hand.

```tsx
import { ArrowRight, SquareArrowOutUpRight } from '@wallarm-org/design-system/icons';
import { Link } from '@wallarm-org/design-system/Link';
import { VStack } from '@wallarm-org/design-system/Stack';

export const Icons = () => (
  <VStack>
    <Link href='#'>
      Open new tab <SquareArrowOutUpRight />
    </Link>

    <Link href='#'>
      Let's explore <ArrowRight />
    </Link>
  </VStack>
);
```

## Props

| Prop           | Type                                                              | Default   | Description |
| -------------- | ----------------------------------------------------------------- | --------- | ----------- |
| download       | `any`                                                             |           |             |
| href           | `string \| undefined`                                             |           |             |
| hrefLang       | `string \| undefined`                                             |           |             |
| target         | `HTMLAttributeAnchorTarget \| undefined`                          |           |             |
| type           | `string \| undefined`                                             | `default` |             |
| defaultChecked | `boolean \| undefined`                                            |           |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined`              |           |             |
| autoFocus      | `boolean \| undefined`                                            |           |             |
| id             | `string \| undefined`                                             |           |             |
| tabIndex       | `number \| undefined`                                             |           |             |
| title          | `string \| undefined`                                             |           |             |
| rel            | `string \| undefined`                                             |           |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`                     |           |             |
| disabled       | `{ true: string; }`                                               | `false`   |             |
| size           | `{ xs: string; sm: string; md: string; lg: string; xl: string; }` | `lg`      |             |
| weight         | `{ regular: string; medium: string; }`                            | `regular` |             |
| data-testid    | `string \| undefined`                                             |           |             |
| asChild        | `boolean \| undefined`                                            | `false`   |             |