TitleClickable

Кликабельный заголовок раздела — нативный <a> с заголовком, опциональной иконкой слева и шевроном справа. Используется в шапках продуктовых блоков, где сам заголовок одновременно является ссылкой на раздел. Длинный текст автоматически усекается через TruncateString.

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

• Заголовок продуктового раздела ведёт на отдельную страницу/детальный вид.
• В шапке карточки/секции, где навигация по клику на заголовок ожидаема пользователем.
• Когда нужен визуальный аффорданс перехода (шеврон) поверх обычной ссылки.

Когда не нужен:

• Inline-ссылка в тексте:
  • используйте @cloud-ru/ds-link.
• Action-кнопка:
  • используйте @cloud-ru/ds-button.
• Строка списка с действием:
  • используйте @cloud-ru/ds-uikit-product-info-row.

Анатомия

Slots

• before — ReactNode слева от заголовка (Figma + slotTitle). Принимает произвольную ноду либо один из готовых пресетов:
  • <TitleClickableIcon icon={...} /> — иконка 24×24 (Figma simpleTitle).
  • <TitleClickableAvatar name=... subtitle=... /> — Avatar + двухстрочный label/subtitle (Figma userTitle).
• title — строка заголовка. Рендерится через Typography variant='title' size='m' с однострочным усечением.
• titleTag — семантический тег заголовка ('h2', 'h3', 'span' и т.п.) для корректной структуры документа.
• children — кастомное содержимое вместо стандартной пары before + title.
• showArrow — управляет видимостью шеврона справа. Иконка справа автоматически меняется на external link при target='_blank'.

Иконка справа (auto)

• chevron (default) — внутренний переход.
• external link — выставляется автоматически, когда target='_blank'.

Deprecated

• icon?: ReactNode — заменён на before={<TitleClickableIcon icon={...} />}. Сохранён для совместимости.
• avatar?: AvatarProps & { subtitle } — заменён на before={<TitleClickableAvatar {...} />}. Сохранён для совместимости.

Если before передан — icon/avatar игнорируются.

Width (default auto)

• auto — компонент занимает по контенту, шеврон прижат к заголовку.
• fullWidth — растягивается на ширину контейнера, шеврон уезжает в правый край.

Target (default _self)

HTML-атрибут target нативной ссылки:

• _self — открыть в текущей вкладке.
• _blank — открыть в новой вкладке; rel='noopener noreferrer' проставляется автоматически.
• _parent — открыть в родительском frame.
• _top — открыть в верхнем frame.

Установка

pnpm add @cloud-ru/ds-uikit-product-title-clickable

import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable'

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

Простой заголовок

import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';

export function Basic() {
  return <TitleClickable href='#' title='Production environment' />;
}

С иконкой

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { TitleClickable, TitleClickableIcon } from '@cloud-ru/ds-uikit-product-title-clickable';

export function WithIcon() {
  return (
    <TitleClickable href='#' title='Production environment' before={<TitleClickableIcon icon={<PlaceholderSVG />} />} />
  );
}

Произвольный контент в `before`

import { Typography } from '@cloud-ru/ds-typography';
import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';

export function WithCustomBefore() {
  return (
    <TitleClickable
      href='#'
      before={
        <Typography variant='label' size='s' as='span'>
          Custom before
        </Typography>
      }
    />
  );
}

Full-width

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';

export function FullWidth() {
  return <TitleClickable href='#' title='Раздел занимает всю ширину контейнера' icon={<PlaceholderSVG />} fullWidth />;
}

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

import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';

export function External() {
  return <TitleClickable href='https://example.com' target='_blank' title='Внешняя ссылка' />;
}

Без шеврона

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';

export function HiddenArrow() {
  return <TitleClickable href='#' title='Без шеврона' icon={<PlaceholderSVG />} showArrow={false} />;
}

С аватаром

import { TitleClickable, TitleClickableAvatar } from '@cloud-ru/ds-uikit-product-title-clickable';

export function WithAvatar() {
  return (
    <TitleClickable href='#' fullWidth before={<TitleClickableAvatar name='John Doe' subtitle='jdoe@example.com' />} />
  );
}

Props

Types

TitleClickableProps

PolymorphicRef

Related props

AvatarProps

Storybook

Figma