---
description: Компонент для отображения заглушек при отсутствии контента или ошибках.
tags: loading
---

<Overview group="data-display">

# Placeholder [tag:component]

Компонент для отображения заглушек при отсутствии контента или ошибках.
Обеспечивает единый стиль для пустых состояний интерфейса.

</Overview>

{/* @example-description: Базовый `Placeholder` для пустого состояния с заголовком и описанием. */}
<Playground>
  ```jsx
  <Placeholder title="Находите друзей">
    Здесь будут отображаться люди, которых вы добавите в друзья
  </Placeholder>
  ```
</Playground>

## Полноэкранный режим (stretched)

Используется когда:

- Нет других элементов на экране;
- Нужно акцентировать внимание на состоянии;
- Требуется центральное позиционирование.

## Отображение нескольких кнопок

Чтобы отобразить несколько кнопок, в свойство `action` можно прокинуть несколько кнопок обернутых в [`ButtonGroup`](/components/button-group):

{/* @example-description: `Placeholder` с несколькими действиями в `ButtonGroup` внутри `action`. */}
<Playground>
  ```jsx
  <Placeholder
    title="Находите друзей"
    action={
      <ButtonGroup mode="vertical" align="center">
        <Button size="m">Найти друзей</Button>
        <Button size="m" mode="tertiary">
          Подробнее
        </Button>
      </ButtonGroup>
    }
  >
    Здесь будут отображаться люди, которых вы добавите в друзья.
  </Placeholder>
  ```
</Playground>

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

## Рекомендации по использованию

- Используйте `outline` иконки (иконки с префиксом `Outline` в `@vkontakte/icons`).
- Используйте кнопки размера `l`.
- Режимы кнопок `primary` или `tertiary`.
- Не используйте вместе с другим контентом при `stretched=true`.
- Избегайте небольших иконок (меньше `56px`).
- Не размещайте интерактивные элементы нигде, кроме `action`.

## Подкомпонентый подход

Компонент можно использовать в подкомпонентном подходе:

{/* @example-description: Сборка `Placeholder` из подкомпонентов `Container`, `Icon`, `Title`, `Description`, `Actions`. */}
<Playground>
  ```jsx
  <Placeholder.Container>
    <Placeholder.Icon>
      <Icon56UserAddOutline />
    </Placeholder.Icon>
    <Placeholder.Title>Находите друзей</Placeholder.Title>
    <Placeholder.Description>
      Здесь будут отображаться люди, которых вы добавите в друзья.
    </Placeholder.Description>
    <Placeholder.Actions>
      <ButtonGroup mode="vertical" align="center">
        <Button size="m">Найти друзей</Button>
        <Button size="m" mode="tertiary">
          Скрыть
        </Button>
      </ButtonGroup>
    </Placeholder.Actions>
  </Placeholder.Container>
  ```
</Playground>

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

### Placeholder

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `action` | `ReactNode` | `-` | Кнопка действия. |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `icon` | `ReactNode` | `-` | Иконка. |
| `noPadding` | `boolean` | `false` | Убирает отступы у компонента. |
| `stretched` | `boolean` | `-` | Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер. |
| `title` | `ReactNode` | `-` | Заголовок плейсхолдера. |

### Placeholder.Container

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `noPadding` | `boolean` | `false` | Убирает отступы у компонента. |
| `stretched` | `boolean` | `-` | Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер. |

### Placeholder.Icon

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |

### Placeholder.Title

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |

### Placeholder.Description

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |

### Placeholder.Actions

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |