# @snack-uikit/info-block

> `npm i @snack-uikit/info-block`

Latest version **1.0.1** (published 2026-09-21) · Apache-2.0 license · 4.0K weekly downloads

## Install

```sh
npm install @snack-uikit/info-block
pnpm add @snack-uikit/info-block
yarn add @snack-uikit/info-block
bun add @snack-uikit/info-block
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-09-21 |
| First published | 2024-01-25 |
| Weekly downloads | 4.0K |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 66.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Белов Алексей |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/info-block
- Repository: https://github.com/cloud-ru-tech/snack-uikit.git#master
- Homepage: https://cloud-ru-tech.github.io/snack-uikit/packages/info-block
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/info-block

## Dependencies (6)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [@snack-uikit/utils](https://npm.io/package/@snack-uikit/utils.md) ^5.0.0
- [@snack-uikit/button](https://npm.io/package/@snack-uikit/button.md) ^1.0.1
- [@snack-uikit/tooltip](https://npm.io/package/@snack-uikit/tooltip.md) ^1.0.1
- [@snack-uikit/typography](https://npm.io/package/@snack-uikit/typography.md) ^1.0.1
- [@snack-uikit/icon-predefined](https://npm.io/package/@snack-uikit/icon-predefined.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2026-09-21
- 1.0.1-preview-acb79d0b.0 (preview) — 2026-09-21
- 1.0.1-preview-b2e4ed46.0 — 2026-09-21
- 1.0.1-preview-27969f64.0 — 2026-09-21
- 1.0.1-preview-fe85442f.0 — 2026-09-18
- 0.6.45-preview-fc6b5b87.0 — 2026-08-20
- 0.6.44 — 2026-08-07
- 0.6.44-preview-4e8bfebd.0 — 2026-08-07
- 0.6.44-preview-eff3bc02.0 — 2026-08-03
- 0.6.43 — 2026-07-03
- 0.6.43-preview-74429015.0 — 2026-07-03
- 0.6.43-preview-02d918ac.0 — 2026-07-03
- 0.6.43-preview-6a625dbd.0 — 2026-06-30
- 0.6.42 — 2026-06-24
- 0.6.42-preview-f9bb03b8.0 — 2026-06-08
- … 180 more at https://npm.io/package/@snack-uikit/info-block/versions

## README

# Info Block

## Installation
`npm i @snack-uikit/info-block`

[Changelog](./CHANGELOG.md)

## Description

- Пакет `@snack-uikit/info-block` предоставляет компонент `InfoBlock` для отображения компактных информационных блоков с заголовком, описанием, иконкой и действиями.
- Компонент подходит для размещения вспомогательных или поясняющих сообщений в интерфейсе (состояния, подсказки, результаты действий) и поддерживает разные размеры (`size: 's' | 'm' | 'l'`) и варианты компоновки контента (`align: 'horizontal' | 'vertical'`).
- Иконка настраивается через проп `icon` (тип, декор, цветовое оформление), использует `IconPredefined` и автоматически подстраивается под выбранный размер блока.
- Для отображения действий предусмотрен вложенный подкомпонент `InfoBlock.Footer` с основной и дополнительной кнопками, которые наследуют размер блока и могут дополняться тултипами.
- Компонент поддерживает пробрасывание служебных пропов (например, `data-`-атрибутов) через `WithSupportProps` и позволяет кастомизировать внешний вид через `className`.
- Figma: [`Info Block`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?type=design&node-id=591%3A52&mode=design).

## Example

```tsx
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"
    />
  );
}
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## InfoBlock
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| title | `string` | - | Заголовок |
| description | `ReactNode` | - | Подзаголовок |
| icon | `Pick<IconPredefinedProps, "icon" \| "decor" \| "appearance">` | - | Иконка |
| size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
| align | enum Align: `"horizontal"`, `"vertical"` | - | Расположение элементов |
| footer | `ReactNode \| ReactElement<FooterProps, ({ primaryButton, secondaryButton, className }: FooterProps) => Element>` | - | Вложенный Footer |
| className | `string` | - | CSS-класс |


[//]: DOCUMENTATION_SECTION_END

---
_Source: https://npm.io/package/@snack-uikit/info-block · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._