AiFieldBanner

AiFieldBanner — компактный баннер под полем ввода из набора AI Components. Показывает подсказку, предупреждение или контекст действия с опциональной иконкой, кнопкой справа и дополнительным слотом снизу.

Мастер-ширина баннера — 400px. Размеры по Figma: s — 400×72, m — 400×84.

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

• Подсказки и валидация у AI-полей (information, help, warning, critical).
• Контекст безопасности или агентного сценария (security, agentic).
• Дополнительный контент под основной строкой — ссылка, чип, короткий список (bottomContent).

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

• Полноразмерный inline-alert в контенте страницы — используйте @cloud-ru/ds-alert.
• Системный баннер по верхней кромке — используйте AlertTop из @cloud-ru/ds-alert.

Анатомия

Variant

Семантика фона (проп variant): information, security, help, agentic, warning, critical. Иконка не подставляется автоматически — передайте icon явно.

Size

Размер (Figma: Mobile Off → s, Mobile On → m).

• s — 400×72, компактная типографика и иконка.
• m — 400×84, увеличенные иконка, текст и кнопка действия.

Content

Основной текст основной строки. Поддерживает перенос на несколько строк (overflow-wrap). Слот скрыт, если не задан.

Icon

Опциональный ReactNode слева от контента. Без icon иконка не рендерится.

import { AiFieldBanner } from '@cloud-ru/ds-ai-field-banner'
import { PlaceholderSVG } from '@cloud-ru/ds-icons'

<AiFieldBanner icon={<PlaceholderSVG />} content='…' />

Action

Текстовая кнопка справа рендерится через AlertButton из @cloud-ru/ds-alert и использует его state layer (:hover, :focus-visible, :active). Рендерится только при actionLabel. onActionClick — обработчик клика.

Bottom content

bottomContent под основной строкой — произвольный контент. Слот скрыт, если не задан.

Установка

pnpm add @cloud-ru/ds-ai-field-banner

import { AiFieldBanner, SIZE, VARIANT } from '@cloud-ru/ds-ai-field-banner'

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

Default

import { AiFieldBanner, VARIANT } from '@cloud-ru/ds-ai-field-banner';
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';

export function Default() {
  return (
    <AiFieldBanner
      variant={VARIANT.Information}
      content='Description'
      actionLabel='Label text'
      icon={<PlaceholderSVG />}
      onActionClick={() => undefined}
    />
  );
}

Variants

import { AiFieldBanner, VARIANT_ORDER } from '@cloud-ru/ds-ai-field-banner';
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';

const variants = VARIANT_ORDER;

export function Variants() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 400 }}>
      {variants.map(variant => (
        <AiFieldBanner
          key={variant}
          variant={variant}
          content='Description'
          actionLabel='Label text'
          icon={<PlaceholderSVG />}
        />
      ))}
    </div>
  );
}

Mobile

import { AiFieldBanner, SIZE, VARIANT } from '@cloud-ru/ds-ai-field-banner';
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';

export function Mobile() {
  return (
    <AiFieldBanner
      size={SIZE.M}
      variant={VARIANT.Agentic}
      content='Description'
      actionLabel='Label text'
      icon={<PlaceholderSVG />}
    />
  );
}

Bottom content

import { AiFieldBanner, VARIANT } from '@cloud-ru/ds-ai-field-banner';
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';

export function WithBottomContent() {
  return (
    <AiFieldBanner
      variant={VARIANT.Information}
      content='Description'
      bottomContent='Additional content'
      actionLabel='Label text'
      icon={<PlaceholderSVG />}
      onActionClick={() => undefined}
    />
  );
}

Props

Types

AiFieldBannerProps

Unions

Size

Variant

Storybook

Figma