TitleClickable

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

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

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

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

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

Анатомия

Slots

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

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

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

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 } from '@cloud-ru/ds-uikit-product-title-clickable';

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

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

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

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

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 } from '@cloud-ru/ds-uikit-product-title-clickable';

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

Props

Types

TitleClickableProps

PolymorphicRef

Related props

AvatarProps

Storybook

Figma