ДокументацияРазделы, компоненты, системы и их подразделы
State
Пустые и системные состояния
System feedback
State объясняет, что произошло и как продолжить
Пустое состояние, результат операции и проблема используют одну структуру: понятный заголовок, короткое объяснение и следующий шаг.
Смысловые варианты
Выбирайте вариант по значению сообщения. Цвет всегда дублируется иконкой, заголовком и текстом.
Проектов пока нет
Создайте первый проект, чтобы начать работу.
Импорт завершён
Добавлено 24 записи без ошибок.
Данные устарели
Обновите отчёт перед публикацией.
Отчёт не загрузился
Проверьте соединение и повторите попытку.
.state-empty.state-success.state-warning.state-error.state-infoЗагрузка и skeleton
Spinner подходит для короткого действия, skeleton повторяет будущую структуру контента. Область загрузки помечайте aria-busy.
Обновляем проекты…
HTMLКарточка загрузки
<div aria-busy="true" aria-label="Загрузка карточки">
<div class="skeleton-card" aria-hidden="true">
<span class="skeleton skeleton-line is-medium"></span>
<span class="skeleton skeleton-line is-long"></span>
</div>
</div>Определённый и бесконечный прогресс
Когда объём известен, сообщайте точное значение. Бесконечный индикатор используйте только до появления измеримого прогресса.
Загрузка файлов68%
Подготовка отчётаВыполняется
68%
Размеры и доступность
Inline живёт внутри виджета, section занимает секцию, page центрируется на странице. Live region объявляет результат без неожиданного переноса фокуса.
.state-inlineКомпактное состояние внутри небольшого блока..state-sectionСостояние самостоятельной секции..state-pageКрупное состояние всей страницы.aria-busy="true"Ожидающий обновления контейнер.role="status"Спокойное динамическое сообщение.role="alert"Только срочная ошибка, требующая внимания.