Link

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

Компонент для навигации — как внутри экрана (якорь), так и во внешних ресурсах. Полиморфен: по умолчанию рендерится как <a>, но поддерживает <button> и кастомные компоненты-роутеры через as. Внутри используется TruncateString — длинные ссылки обрезаются и раскрывают полный текст в тултипе.

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

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

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

Анатомия

Appearance

Семантика цвета: neutral — основной текстовый линк, invertNeutral — на тёмных фонах, primary — брендовый акцент; red для деструктивных, orange/yellow — предупреждения, green — успех; blue, violet, pink — декоративные категории.

Role appearance (default regular)

Роль, в которой применяется выбранный appearance:

• regular — линк на обычной поверхности, цвет берётся из text-токена темы.
• onAccent — линк поверх цветных акцентных подложек (кнопка-бэйдж, баннер), цвет берётся из onAccent-токена.

Target

HTML-атрибут target: _self (дефолт, в той же вкладке), _blank (новая вкладка), _parent, _top — для iframe-сценариев.

Установка

pnpm add @cloud-ru/ds-link

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

Примеры использования

1. Простая ссылка

Рендер как нативный a href target

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

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

2. Внутри текста

insideText=true: строка может переноситься, TruncateString не применяется

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>
  );
}

3. Полиморфизм: кнопка

as='button' — действие, семантически оформленное как ссылка

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

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

4. Внешняя ссылка

target='_blank' → rel='noopener noreferrer' автоматически

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

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

Props

LinkProps

Related types

• Appearance = "blue" | "green" | "invertNeutral" | "neutral" | "orange" | "pink" | "primary" | "red" | "violet" | "yellow"

• RoleAppearance = "onAccent" | "regular"