# @cloud-ru/ds-link

> Семантическая ссылка дизайн-системы — 10 appearance, полиморфный рендер (a / button / кастомный компонент), inline-режим в тексте и интеграция с TruncateString.

Docs: /snack-v2/components/link/

## Установка

```sh
pnpm add @cloud-ru/ds-link
```

## Когда использовать

- Для переходов между страницами и разделами.
- Для ссылок внутри текста (`insideText`) — компонент не ломает перенос строк.
- Для действий, которые семантически являются навигацией, но физически — кнопкой (`as='button'`).

Когда **не** нужен: для кнопки-действия (сохранить, удалить) используйте `@cloud-ru/ds-button` с `view='function'`, а не `Link as='button'`.

## API

### Link
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `appearance` | `blue \| green \| invertNeutral \| neutral \| orange \| pink \| primary \| red \| violet \| yellow` | `primary` | no | Семантический цвет |
| `as` | `ComponentType \| ElementType` | `'a'` | no | Полиморфный компонент.  Оформить переданный компонент или html элемент в стиль ссылки.  Список атрибутов, которые переданный компонент должен принять: <br/> - `className` <br/> - `data-size` <br/> - `data-text-mode` <br/> - `data-appearance` <br/> - `data-inside-text` |
| `data-test-id` | `string` | — | no |  |
| `href` | `string` | — | yes |  |
| `innerRef` | `any` | — | no | Ref на реальный DOM-элемент/инстанс, который рендерится через `as`. Используем явный проп, чтобы не зависеть от `forwardRef` и не тащить type-assertions на экспорт. |
| `insideText` | `boolean` | `false` | no | Находится ли ссылка внутри текста (и можно ли её переносить) |
| `label` | `string` | — | no | Текст ссылки |
| `onClick` | `((e: MouseEvent<HTMLAnchorElement>) => void) \| undefined` | — | no |  |
| `roleAppearance` | `onAccent \| regular` | `regular` | no | Роль, в которой применяется `appearance`: обычный текст или текст на акцентной подложке |
| `target` | `string \| undefined` | — | no |  |
| `truncateVariant` | `end \| middle` | — | no | Вариант обрезания строки: <br/> - `end` - с конца; <br/> - `middle` - посередине |
| `underlined` | `boolean` | `false` | no | Наличие нижнего подчеркивания |

## Примеры

### Basic

```tsx
import { Link } from '@cloud-ru/ds-link';

export function Basic() {
  return <Link label='Документация API' href='https://example.com/docs' />;
}
```

### External

```tsx
import { Link } from '@cloud-ru/ds-link';

export function External() {
  return <Link label='Открыть в новой вкладке' href='https://example.com' target='_blank' />;
}
```

### InsideText

```tsx
import { Link } from '@cloud-ru/ds-link';

export function InsideText() {
  return (
    <p>
      Подробнее читайте <Link insideText label='в документации' href='https://example.com' />, а также ознакомьтесь с{' '}
      <Link insideText underlined label='условиями' href='https://example.com/terms' />.
    </p>
  );
}
```

### Polymorphic

```tsx
import { Link } from '@cloud-ru/ds-link';

export function Polymorphic() {
  return <Link as='button' type='button' label='Открыть диалог' onClick={() => alert('clicked')} />;
}
```