AlertTop

Глобальный баннер, который крепится к верхней кромке приложения. В отличие от Alert, всегда рендерится на сплошной цветной подложке (определяется appearance) и не поддерживает outline — визуально это «полоса сообщения», а не карточка.

Демо

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

• Для плановых технических работ и maintenance-окон.
• Для глобальных ограничений (например, «В вашем регионе временно недоступны платежи»).
• Для системных анонсов, которые касаются всех пользователей приложения.

Когда не нужен: для сообщений, которые касаются конкретной страницы или формы — используйте Alert.

Анатомия

Appearance

Семантическая роль топ-баннера: neutral/primary — нейтрально-информативная подача, info — информ-акцент, success — успех (редко в топ-баннере), warning — предупреждение (maintenance), error — критическое ограничение/инцидент.

Align

Выравнивание заголовка и описания: horizontal — в одну строку (короткий анонс), vertical — заголовок над текстом (длинное описание + действие).

Size

Плотность баннера: s — компактный, m — дефолт.

Установка

pnpm add @cloud-ru/ds-alert

import { AlertTop } from '@cloud-ru/ds-alert'

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

Системное уведомление

import { AlertTop } from '@cloud-ru/ds-alert';

export function SystemNotice() {
  return (
    <AlertTop
      appearance='info'
      title='Плановые работы'
      content='Сегодня с 22:00 до 23:00 возможны кратковременные перебои.'
    />
  );
}

Props

Types

AlertTopProps

AlertButtonProps

AlertTopLayoutDefaults

Unions

Align

Appearance

Size

Related props

LayoutPresets

Адаптивность

AlertTop — адаптивный компонент класса preset-defaults: DOM один, по раскладке меняются только дефолты пропсов. Раскладку компонент читает из контекста @cloud-ru/ds-adaptive — отдельного пропа layoutType нет.

Desktop-first. Верстайте под desktop и поставьте один <AdaptiveProvider> в корне приложения — mobile-дефолты применяются автоматически. Override нужен только как escape-hatch.

На mobile баннер становится раскрываемым (collapsible): длинный текст и действия скрыты до клика по баннеру, на месте close-кнопки появляется шеврон раскрытия. На desktop баннер плоский.

Источник mobile-дефолтов — экспортируемая константа ALERT_TOP_LAYOUT_PRESETS.

Как переопределить

Desktop-first: перенос пропа из desktop-макета не ломает mobile. Приоритет (от высшего к низшему): layoutPresets[layout] (инстанс) → DS-пресет ALERT_TOP_LAYOUT_PRESETS → явный проп (= desktop-значение) → базовый дефолт.

import { AlertTop } from '@cloud-ru/ds-alert'

// 1. Явный проп — задаёт DESKTOP-значение; mobile остаётся collapsible (mobile не ломается)
<AlertTop collapsible={false} title='…' content='…' />

// 2. layoutPresets.mobile — единственный способ изменить mobile (явно)
<AlertTop layoutPresets={{ mobile: { collapsible: false } }} title='…' content='…' />

// 2b. layoutPresets.desktop — изменить только desktop, mobile-адаптив сохранён
<AlertTop layoutPresets={{ desktop: { collapsible: true } }} title='…' content='…' />

DS-пресет (ALERT_TOP_LAYOUT_PRESETS) — точка форка mobile-дефолтов на уровне всей дизайн-системы.

Как форсировать раскладку

Раскладка переключается только контекстом, не пропом:

import { AdaptiveProvider, withLayoutType } from '@cloud-ru/ds-adaptive'
import { AlertTop } from '@cloud-ru/ds-alert'

// поддерево — вложенный провайдер
<AdaptiveProvider layoutType='mobile'>
  <AlertTop title='…' content='…' />
</AdaptiveProvider>

// компонент/секция — HOC (module-scope, не в рендере)
const MobileAlertTop = withLayoutType(AlertTop, 'mobile')

Подробнее о модели раскладки — в @cloud-ru/ds-adaptive.

Storybook

Figma