AiFieldBanner

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

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

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

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

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

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

Анатомия

Type

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

Size

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

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

Description

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

Icon

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

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

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

Action

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

Additional slot

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

Установка

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

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

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

Default

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

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

Types

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

const types = TYPE_ORDER;

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

Mobile

import { AiFieldBanner, SIZE, TYPE } 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={TYPE.Agentic}
      description='Description'
      actionLabel='Label text'
      icon={<PlaceholderSVG />}
    />
  );
}

Additional slot

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

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

Props

Types

AiFieldBannerProps

Unions

Size

Type

Storybook

Figma