llms.txt

Logo

Logo — ссылка на главную с иконкой Cloud или кастомным изображением. Поддерживает badge режима окружения (develop, stage, hybrid).

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

  • Слот logo в HeaderLayout.
  • Отображение режима стенда рядом с логотипом.

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

Базовый логотип

Базовый логотипДефолтная иконка с tooltip при наведении.
tsx
import { Logo } from '@cloud-ru/ds-uikit-product-header';

export function Basic() {
  return <Logo href='/' tooltip={{ tip: 'На главную' }} data-test-id='header-logo-basic' />;
}

Режимы окружения

Режимы окруженияПроп `mode` добавляет promo-tag с подписью стенда.
tsx
import { Logo } from '@cloud-ru/ds-uikit-product-header';

export function WithMode() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <Logo href='/' mode='develop' data-test-id='header-logo-develop' />
      <Logo href='/' mode='stage' data-test-id='header-logo-stage' />
      <Logo href='/' mode='hybrid' data-test-id='header-logo-hybrid' />
    </div>
  );
}

Props

Types

PropsLogoProps
PropTypeDefaultRequiredDescription
classNamestring—noCSS-класс корневого элемента.
data-test-idstring—no
hrefstring—yesСсылка логотипа.
loadingboolean—noФлаг загрузки — логотип показывается в состоянии загрузки кнопки.
mode"develop" | "hybrid" | "prod" | "stage"—noРежим окружения — отображается промо-тегом рядом с дефолтной иконкой (не для `'prod'`).
onClickMouseEventHandler<HTMLAnchorElement>—noКолбэк клика по логотипу.
pathstring—noПуть до кастомного изображения логотипа. Без пропа (или при ошибке загрузки) — дефолтная иконка.
tooltipTooltipProps—noНастройки тултипа логотипа.

Unions

HeaderLogoModeunion

"develop" | "hybrid" | "prod" | "stage"

Related props

TooltipPropsinterface

PropTypeDefaultRequiredDescription
childrenReactNode | ChildrenFunction—noТриггер поповера (подробнее читайте ниже)
classNamestring | undefined—no
closeOnPopstateboolean | undefined—noЗакрывать ли поповер при переходе по истории браузера
data-test-idstring | undefined—no
disableMaxWidthboolean | undefined—noОтключение ограничения ширины тултипа
disableSpanWrapperboolean | undefined—noОтключает для `isValidElement` внешнюю обертку триггера <br/> Пригодится для элементов с `position: absolute` <br/> Работает для триггеров, которые умеют отдать свою DOM-ноду: нативные элементы, `forwardRef`-компоненты и компоненты, помеченные `withInnerRefSupport` из `@cloud-ru/ds-utils`. Остальные всё равно получают `<span>` — без ноды поповеру не от чего считать позицию; в dev-режиме об этом печатается предупреждение.
fallbackPlacementsPlacement[] | undefined—noЦепочка расположений которая будет применяться к поповеру от первого к последнему если при текущем он не влезает.
hoverDelayClosenumber | undefined—noЗадержка закрытия по ховеру
hoverDelayOpennumber | undefined—noЗадержка открытия по ховеру
offsetnumber | undefined—noОтступ поповера от его триггер-элемента (в пикселях).
onOpenChange((isOpen: boolean) => void) | undefined—noКолбек отображения компонента. Срабатывает при изменении состояния open.
openboolean | undefined—noУправляет состоянием показан/не показан.
placement"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"—noПоложение поповера относительно своего триггера (children).
tipstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—yesСодержимое тултипа (текст или разметка)
trigger"click" | "clickAndFocusVisible" | "focus" | "focusVisible" | "hover" | "hoverAndFocus" | "hoverAndFocusVisible"—noУсловие отображения поповера: <br/> - `click` - открывать по клику <br/> - `hover` - открывать по ховеру <br/> - `focusVisible` - открывать по focus-visible <br/> - `focus` - открывать по фокусу <br/> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br/> - `hoverAndFocus` - открывать по ховеру и фокусу <br/> - `clickAndFocusVisible` - открывать по клику и focus-visible
triggerClassNamestring | undefined—noCSS-класс триггера
triggerRefForwardedRef<HTMLElement | ReferenceType | null> | undefined—noRef ссылка на триггер

Types

LogoProps

Unions

Storybook

Открыть в Storybook →

Figma