Пустое состояние
Пустое состояние занимает область, которая загрузилась, но показать в ней нечего. Оно объясняет, почему пусто, и предлагает следующий шаг.
Create your first project
A project is where your team's work lives. Set one up to get started.<tk-empty-state> <tk-icon slot="media" name="plus"></tk-icon> <h3 slot="title">Create your first project</h3> A project is where your team's work lives. Set one up to get started. <tk-button slot="actions" variant="primary">New project</tk-button> </tk-empty-state>
Анатомия
| Часть | Что это |
|---|---|
tk-empty-state |
сам элемент; колонка по центру шириной до 30rem |
слот media |
иконка или картинка, по желанию; декоративная |
слот title |
заголовок, по желанию; кладите в него настоящий заголовок |
| слот по умолчанию | основной текст: короткое объяснение |
слот actions |
действия под текстом, по центру, по желанию |
Любой слот можно не заполнять, пустой не занимает места.
Сценарии
Во всех сценариях один и тот же элемент. Различают их картинка, текст и действие.
| Сценарий | Картинка | Заголовок | Действие |
|---|---|---|---|
| Первый запуск | крупная tk-icon или картинка |
«Создайте первый проект» | одно главное «Создать» или «Добавить» |
| Пустой список | tk-icon |
«Сохранённого пока нет» | «Добавить» или ничего |
| Ничего не найдено | search |
«По запросу „invoce“ ничего нет» | «Сбросить фильтры» или «Изменить запрос» |
| Ошибка загрузки | error |
«Что-то пошло не так» | «Повторить» и, возможно, ссылка на поддержку |
| Всё сделано | ничего или значок | «Всё прочитано» | обычно ничего |
Something went wrong
We couldn't load your invoices. Check your connection and try again.<tk-empty-state> <tk-icon slot="media" name="error"></tk-icon> <h3 slot="title">Something went wrong</h3> We couldn't load your invoices. Check your connection and try again. <tk-button slot="actions" variant="primary">Retry</tk-button> <tk-link slot="actions" treatment="quiet" href="/support">Contact support</tk-link> </tk-empty-state>
- Ошибку показывайте нейтрально. Красного или зелёного вида нет; смысл несут текст и действие «Повторить».
- После поиска дайте выход, например «Сбросить фильтры». Никогда не «Добавьте первый».
Размеры
<tk-empty-state compact> <tk-icon slot="media" name="search"></tk-icon> <span slot="title">No results for 'quarterly'</span> Try a different search, or clear the filters. <tk-button slot="actions" size="small">Clear filters</tk-button> </tk-empty-state>
| Отступы (сверху-снизу × по бокам) | Картинка | Заголовок | Текст | |
|---|---|---|---|---|
| по умолчанию | space-48 × space-24 |
3rem | font-size-xl |
font-size-md |
compact |
space-24 × space-16 |
2rem | font-size-lg |
font-size-sm |
Обычный размер — чтобы заполнить страницу или большую панель, compact — внутри карточки,
панели или таблицы. Если у области есть высота, элемент встанет по центру и по вертикали.
Картинка
tk-iconslot="media"подстраивается под размер блока и берёт приглушённый цвет иконок. Картинка задаёт размер сама.- Картинку скрывают от скринридеров, если вы не дали ей имя через
alt,aria-labelилиaria-labelledby. Давайте имя, только если картинка добавляет смысл, которого нет в тексте. - Иллюстраций в Thykes нет; если нужна, принесите свою.
Когда использовать
- Пустое состояние — когда область загрузилась и пуста: первый запуск, поиск ничего не нашёл, пустой список или ошибка загрузки. Оно заменяет содержимое области.
- Пока содержимое грузится, показывайте
Skeleton . - Для заметки о содержимом, которое на месте, есть
Section message . - Для сообщения обо всём приложении есть
Banner . - Для ошибки на всю страницу, например 404, соберите страницу сами и поставьте пустое состояние в её центр.
Текст
- Объясните, почему пусто и как начать: «Создайте первый проект».
- После поиска помогите выбраться: проверить написание, поискать шире.
- Действие начинается с глагола: «Сбросить фильтры», «Повторить». Одно главное действие и не больше одного второстепенного.
- Текст должен работать без картинки. Без восклицательных знаков и без упрёков.
Подробнее в
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
| Объяснить, почему пусто и что делать | Пустая панель без выхода |
| «Сбросить фильтры» после поиска | «Добавьте первый» после поиска |
| Ошибка загрузки нейтрально, с «Повторить» | Красить пустое состояние в красный или зелёный |
| Skeleton, пока идёт загрузка | Пустое состояние до прихода данных |
«Ничего не найдено» через role="status" |
Ждать, что пустое состояние объявит себя само |
Связанные
Skeleton : заглушка, пока грузится содержимое.Section message : заметка поверх содержимого, которое на месте.Banner : сообщение обо всём приложении.Button ,Link иIcon : что кладут в слоты.
API
Атрибуты
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
compact |
boolean | false |
меньше отступы, картинка и заголовок |
Слоты
| Слот | Содержимое |
|---|---|
media |
tk-icon или ваша картинка; скрыта, если без имени |
title |
заголовок (<h2>–<h6>) или <span> |
| по умолчанию | основной текст |
actions |
главная tk-button и, по желанию, тихая tk-link |
События
Нет.
CSS
- Parts:
empty-state,media,title,body,actions. --tk-empty-state-max-width: наибольшая ширина колонки, по умолчанию30rem.--tk-empty-state-media-size: размер картинки, по умолчанию3rem, сcompact2rem.
Токены
| Часть | Токен |
|---|---|
| заголовок | text/default |
| текст | text/secondary |
картинка tk-icon |
icon/secondary |
| промежуток | space-16, с compact space-12; между действиями space-12 |
Заливки у элемента нет, он лежит на той поверхности, что вокруг.
Доступность
Встроено:
- Роли нет, это не live-область; его читают по порядку, как любое содержимое.
- Фокус он не забирает. Действия — обычные кнопки и ссылки.
- Картинка без имени скрыта от скринридеров.
- Контраст текста — AA во всех темах.
На вашей стороне:
- В
title— настоящий заголовок нужного для страницы уровня. - После поиска объявите результат сами: визуально скрытый
role="status"у области результатов с текстом «Ничего не найдено». Как это сделать, показано на страницеSkeleton . - Смысл — в словах, а не в картинке.