EmptyState
Порожній стан із поясненням і дією, що усуває причину порожнечі.
Приклад
Поки що жодного проєкту
Проєкт збирає сторінки, файли та доступи в одному місці.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
title* | string | — | Головний рядок. Формулюйте як стан, а не як помилку. |
description | string | — | Пояснення під заголовком. Найкраще — що зробити далі. |
tone | neutralaccentdanger | "neutral" | Колір іконки. `danger` — лише коли порожнеча є наслідком помилки. |
compact | boolean | — | Щільний варіант — для порожньої таблиці чи панелі, а не сторінки. |
Слоти
| Назва | Опис |
|---|---|
default | Дія — зазвичай одна кнопка, що усуває причину порожнечі. |
icon | Іконка над заголовком. |
Коли використовувати
Замість порожньої області — завжди. Порожня таблиця без пояснення читається як помилка завантаження.
Коли НЕ використовувати
Не використовуйте для помилок. Порожньо і зламано — різні стани, і дія в них різна: «створити перший проєкт» проти «повторити спробу».
Доступність
Формулюйте title як стан, а не як докір: «Поки що жодного проєкту», а не
«Ви нічого не створили». description найкраще використати, щоб пояснити,
що дасть дія — тоді кнопка в слоті стає очевидним наступним кроком.