Link
Компонент для навигации — как внутри экрана (якорь), так и во внешних ресурсах. Полиморфен: по умолчанию рендерится как <a>, но поддерживает <button> и кастомные компоненты-роутеры через as. Внутри используется TruncateString — длинные ссылки обрезаются и раскрывают полный текст в тултипе.
Демо
appearancedata-test-idhrefinsideTextlabelroleAppearanceunderlined<Link appearance="primary" insideText={false} label="Link text" roleAppearance="regular" underlined={false} href="https://example.com" />Когда использовать
- Для переходов между страницами и разделами.
- Для ссылок внутри текста (
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-linkimport { Link } from '@cloud-ru/ds-link'Примеры использования
1. Простая ссылка
import { Link } from '@cloud-ru/ds-link';
export function Basic() {
return <Link label='Документация API' href='https://example.com/docs' />;
}2. Внутри текста
Подробнее читайте
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. Полиморфизм: кнопка
import { Link } from '@cloud-ru/ds-link';
export function Polymorphic() {
return <Link as='button' type='button' label='Открыть диалог' onClick={() => alert('clicked')} />;
}4. Внешняя ссылка
import { Link } from '@cloud-ru/ds-link';
export function External() {
return <Link label='Открыть в новой вкладке' href='https://example.com' target='_blank' />;
}Props
Types
LinkProps| 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 | Наличие нижнего подчеркивания |