@snack-uikit/info-block

Info Block

Installation

npm i @snack-uikit/info-block

Changelog

Description

• Пакет @snack-uikit/info-block предоставляет компонент InfoBlock для отображения компактных информационных блоков с заголовком, описанием, иконкой и действиями.
• Компонент подходит для размещения вспомогательных или поясняющих сообщений в интерфейсе (состояния, подсказки, результаты действий) и поддерживает разные размеры (size: 's' | 'm' | 'l') и варианты компоновки контента (align: 'horizontal' | 'vertical').
• Иконка настраивается через проп icon (тип, декор, цветовое оформление), использует IconPredefined и автоматически подстраивается под выбранный размер блока.
• Для отображения действий предусмотрен вложенный подкомпонент InfoBlock.Footer с основной и дополнительной кнопками, которые наследуют размер блока и могут дополняться тултипами.
• Компонент поддерживает пробрасывание служебных пропов (например, data--атрибутов) через WithSupportProps и позволяет кастомизировать внешний вид через className.
• Figma: Info Block.

Example

import { InfoBlock } from '@snack-uikit/info-block';
import { PlaceholderSVG } from '@snack-uikit/icons';

export function InfoBlockExample() {
  return (
    <InfoBlock
      title="Не найдено данных"
      description="Проверьте параметры фильтра или попробуйте обновить страницу позже."
      size="m"
      align="vertical"
      icon={{
        icon: PlaceholderSVG,
        decor: true,
        appearance: 'primary',
      }}
      footer={
        <InfoBlock.Footer
          primaryButton={{
            text: 'Обновить',
            onClick: () => console.log('Refresh'),
          }}
          secondaryButton={{
            text: 'Изменить фильтр',
            onClick: () => console.log('Change filter'),
          }}
        />
      }
      data-test-id="info-block-example"
    />
  );
}

InfoBlock

Props