Logo
Логотип шапки (Figma buttonSimpleNeutral + CloudLogo). Оболочка — @cloud-ru/ds-button (neutral / simple / m).
Демо
Когда использовать
- Слот
logoвHeaderLayout. - Нужен брендовый знак с учётом окружения (
mode) или кастомной картинки (path).
Анатомия
Mode (default prod)
prod—CloudLogo.develop—CloudLogoDev.stage—CloudLogoStage.hybrid—CloudLogoHybrid.
Path и loading
path— кастомное изображение; при ошибке загрузки — fallback наmode.loading— spinner Button.
Установка
pnpm add @cloud-ru/ds-uikit-product-header-legacyimport { Logo, HEADER_LOGO_MODE } from '@cloud-ru/ds-uikit-product-header-legacy'Примеры использования
Режимы окружения
tsx
import { HEADER_LOGO_MODE, Logo } from '@cloud-ru/ds-uikit-product-header-legacy';
export function Modes() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<Logo href='#' mode={HEADER_LOGO_MODE.Prod} />
<Logo href='#' mode={HEADER_LOGO_MODE.Develop} />
<Logo href='#' mode={HEADER_LOGO_MODE.Stage} />
<Logo href='#' mode={HEADER_LOGO_MODE.Hybrid} />
</div>
);
}Loading
tsx
import { Logo } from '@cloud-ru/ds-uikit-product-header-legacy';
export function Loading() {
return <Logo href='#' loading />;
}Ссылка
tsx
import { HEADER_LOGO_MODE, Logo } from '@cloud-ru/ds-uikit-product-header-legacy';
export function CustomHref() {
return <Logo href='https://cloud.ru' mode={HEADER_LOGO_MODE.Prod} />;
}Props
Types
Props
LogoProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
className | string | — | no | CSS-класс корневой кнопки. |
data-test-id | string | — | no | |
href | string | — | yes | Ссылка логотипа. |
loading | boolean | false | no | Состояние загрузки (spinner Button). |
mode | "develop" | "hybrid" | "prod" | "stage" | — | no | Окружение: влияет на вариант брендового логотипа (legacy-extension). |
onClick | MouseEventHandler<HTMLAnchorElement> | — | no | Обработчик клика. |
path | string | — | no | URL кастомной картинки логотипа. При ошибке загрузки — fallback на mode/prod. |