---
description: Компонент для отображения важных уведомлений и промо-блоков с возможностью взаимодействия.
tags: notification
---

<Overview group="data-display">
# Banner [tag:component]

Компонент для отображения важных уведомлений и промо-блоков с возможностью взаимодействия. Поддерживает различные режимы отображения и типы контента.

</Overview>

{/* @example-description: Banner: аватар, заголовок, подзаголовок, кнопка. */}
<Playground>
  ```jsx
  <Banner
    before={<Avatar size={48} initials="ЕХ" />}
    title="Новое уведомление"
    subtitle="У вас 5 новых сообщений"
    actions={<Button mode="primary">Просмотреть</Button>}
  />
  ```
</Playground>

## Режимы отображения

Задаётся свойством `mode`.

Помимо стандартного режима (`mode="tint"`), поддерживается `mode="image"`, предназначенный для
отображения компонента с фоновым изображением.

{/* @example-description: Banner в режиме image с кнопкой поверх фона. */}
<Playground>
  ```jsx
  <Banner
    mode="image"
    title="Мои достижения"
    subtitle="Разблокировано 9 из 36"
    background={
      <div
        style={{
          backgroundColor: '#65c063',
          backgroundImage:
            'url(https://sun9-59.userapi.com/7J6qHkTa_P8VKRTO5gkh6MizcCEefz04Y0gDmA/y6dSjdtPU4U.jpg)',
          backgroundPosition: 'right bottom',
          backgroundSize: 320,
          backgroundRepeat: 'no-repeat',
        }}
      />
    }
    actions={<Button appearance="overlay">Подробнее</Button>}
  />
  ```
</Playground>

## Контентные блоки

### Правая секция (`after`)

Поддерживает следующие варианты:

- `dismiss` — кнопка закрытия;
- `chevron` — индикатор перехода;
- `ReactNode` — пользовательский элемент.

{/* @example-description: Секция after с chevron для перехода. */}
<Playground>
  ```jsx
  <Banner
    title="Больше интересных подкастов в каталоге"
    subtitle="Найдите интересующие именно вас подкасты!"
    after="chevron"
  />
  ```
</Playground>

### Левая секция (`before`)

{/* @example-description: Секция before с изображением. */}
<Playground>
  ```jsx
  <Banner
    before={
      <Image
        size={96}
        src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg"
      />
    }
    title="Баста в Ледовом"
    subtitle="Большой концерт"
    after="dismiss"
    actions={<Button>Подробнее</Button>}
  />
  ```
</Playground>

### Текстовые элементы

Компонент поддерживает следующие текстовые элементы:

- `title` — основной заголовок;
- `subtitle` — дополнительный текст;
- `extraSubtitle` — расширенное описание.

{/* @example-description: Баннер с многострочным текстовым контентом и ссылкой внутри `subtitle`. */}
<Playground>
  ```jsx
  <Banner
    title="Телефон ожидает подтверждения"
    subtitle={
      <React.Fragment>
        Новый номер +7 ••• ••• •• 96 будет сохранён через семь дней.
        <br />
        <Link href="#">Ускорьте процесс</Link>, если у Вас есть
        <br />
        доступ к старому номеру.
      </React.Fragment>
    }
  />
  ```
</Playground>

## Действия

Для добавления действий используйте свойство `actions`.

{/* @example-description: Несколько действий в `Banner` через `ButtonGroup` в блоке `actions`. */}
<Playground>
  ```jsx
  <Banner
    before={
      <Avatar src="https://sun9-7.userapi.com/q9qBUh4kGND1pTUytY4LwljtRLWoCXaIzN7C2A/52lM85R5kus.jpg" />
    }
    extraSubtitle="Хотите, чтобы вам меньше мешали? Включите режим «невидимка»!"
    actions={
      <ButtonGroup mode="horizontal" gap="m">
        <Button>Включить</Button>
        <Button mode="link">Подробнее</Button>
      </ButtonGroup>
    }
  />
  ```
</Playground>

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `actions` | `ReactNode` | `-` | Кнопки-действия. Принимает [`Button`](https://vkui.io/components/button).  - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:    - `mode="primary"`    - `mode="secondary"` - В режиме `image` с тёмным фоном используйте с параметрами:    - `appearance="overlay"`.  Для набора кнопок используйте [`ButtonGroup`](https://vkui.io/components/button-group) с параметрами:  - `gap="m" mode="horizontal" stretched` - `gap="m" mode="vertical" stretched`. |
| `activated` | `boolean` | `-` | Позволяет управлять `activated`-состоянием извне. |
| `activeClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `activeMode`. |
| `activeEffectDelay` | `number` | `-` | Длительность показа `active`-состояния. |
| `activeMode` | `StateModeLiteral` | `-` | Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. |
| `after` | `ReactNode` | `-` | Тип действия в правой части баннера.  - `dismiss` – отображается иконка крестика, при нажатии на неё сработает свойство `onDismiss`. - `chevron` – отображается иконка шеврона, которая подразумевает, что при нажатии на баннер можно куда-то перейти. |
| `background` | `ReactNode` | `-` | При использовании `mode="image"`.  Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера. |
| `before` | `ReactNode` | `-` | Содержимое, отображаемое в левой части баннера. |
| `borderRadiusMode` | `"auto" \| "inherit"` | `-` | Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `dismissLabel` | `string` | `Скрыть` | Текст кнопки закрытия. Делает ее доступной для ассистивных технологий. |
| `extraSubtitle` | `ReactNode` | `-` | Дополнительный подзаголовок баннера. |
| `focusVisibleMode` | `FocusVisibleMode` | `-` | Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `hasActive` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `active`-состояние. |
| `hasHover` | `boolean` | `-` | Указывает, должен ли компонент реагировать на `hover`-состояние. |
| `hasHoverWithChildren` | `boolean` | `-` | Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается.  Присваивается родителькому компоненту. |
| `hoverClassName` | `string` | `-` | **Deprecated**: Since 7.3.0. Будет удалено в **VKUI v9**.  Используйте свойство `hoverMode`. |
| `hovered` | `boolean` | `-` | Позволяет управлять `hovered`-состоянием извне. |
| `hoverMode` | `StateModeLiteral` | `-` | Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. |
| `imageTheme` | `"auto" \| "dark" \| "light"` | `auto` | При использовании `mode="image"`.  - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным. - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым. - `auto` - цвет фона и текста будет зависеть от цветовой схемы приложения. |
| `mode` | `"image" \| "tint"` | `tint` | Тип баннера. |
| `onDismiss` | `MouseEventHandler<HTMLButtonElement>` | `-` | Срабатывает при нажатии на иконку крестика при `after="dismiss"`. |
| `size` | `"s" \| "m"` | `s` | Размер баннера. |
| `subtitle` | `ReactNode` | `-` | Подзаголовок. |
| `title` | `ReactNode` | `-` | Заголовок. |
| `unlockParentHover` | `boolean` | `-` | Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент.  Присваивается дочернему компоненту. |