Компоненты
Состояния
Метки статуса, сообщения, уведомления, пустой список, загрузка.
Метка статуса
Статус продажи, лида, оплаты — маленькая метка с точкой. Цвет по смыслу: зелёный — готово, жёлтый — ждём, красный — проблема, синий — новое.
Статусы продажи
Другие
Подпись и метка с числом
Иконка статуса (StatusIcon)
Статус в таблице — цветная иконка и её название (в dashboard одной иконки оказалось мало). Где мало места — только иконка (bare), название в подсказке. В списке выбора иконка стоит перед текстом.
Статусы продажи
Только иконка (bare) — когда мало места
Статусы сеанса
В фильтре
Правила
- У каждого статуса свой цвет и иконка: зелёный — активно / готово, жёлтый — ждём / истёк срок, красный — закрыто / потеряно, синий — новое, фиолетовый — уехал.
- Серого «мёртвого» статуса нет — все цвета яркие и легко различаются.
- Иконка 28 px, в списке 22 px; у bare название в data-tip и aria-label.
Блок сообщения
Сообщение внутри формы или страницы: отказ сервера, предупреждение, успех, информация.
Правила
- Ошибка — role="alert", остальные — обычный текст.
- Текст короткий: что случилось и что делать.
Уведомление (toast)
Короткое подтверждение после действия: «Сохранено». На web — справа внизу, на телефоне — внизу во всю ширину; исчезает через 4 секунды.
Загрузка
Пока ждём данные — скелет в форме страницы; внутри кнопки — вращающийся круг; долгий процесс — полоса прогресса.
Пустое состояние и страница ошибки
Пусто — причина и следующий шаг. Ошибка — что случилось, простыми словами, и «Повторить».
Поищите другим словом или сбросьте фильтр.
Сервер не ответил. Попробуйте через минуту.