Элементы интерфейса веб-приложений

Когда: при вложенности 3+ уровня. Помогают понять где ты и вернуться назад.

Когда: переключение между связанными разделами одного экрана. Максимум 5–6 вкладок.

Отличие от Tabs: для переключения режимов отображения, не разделов. Единый контрол с выбором.

Primary — главное действие.
Secondary — второстепенное.
Ghost — менее важное, не отвлекает.
Danger — деструктивное действие.

Disabled — opacity 40%, cursor not-allowed. Icon button — квадратная кнопка только с иконкой.

Когда: одно главное действие всегда доступно — создать, добавить. В веб-приложениях реже чем в мобайле.

Label всегда над полем. Error: красная рамка + сообщение под полем.

Stepper — для чисел с шагом. Всегда ограничивай минимум и максимум.

Toggle — вкл/выкл. Checkbox — множественный выбор. Radio — один вариант.

Drag-and-drop зона. При наведении меняет цвет. При клике открывает диалог выбора файла.

Combobox = Input + Dropdown. Поддерживает поиск по вариантам. Отличается от Select тем что можно вводить текст.

Вертикальный список с иконкой + контент + мета. Весь элемент кликабелен.

Активная страница — синяя заливка. Стрелки видны всегда. Многоточие при большом количестве страниц.

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

Header (заголовок + метка) + Body (контент) + Footer (действия).

Лейбл мелкий сверху, число крупное, динамика снизу. Стандарт для дашбордов.

Когда: FAQ, настройки, длинные разделы не нужные всем сразу. Раскрывается по клику.

Зелёный — хорошее. Красный — ошибка. Синий — процесс. Серый — неактивное.

Chip — интерактивный тег для фильтрации и выбора категорий. Может иметь кнопку удаления.

Status dot — маленькая точка рядом с аватаром. Rating — звёздный рейтинг для оценки.

Всегда показывай числовое значение рядом. Цвет несёт смысл: синий — нейтральный, зелёный — хорошо, красный — проблема.

Spinner — анимированный индикатор загрузки. Может быть отдельным или внутри кнопки.

Серые блоки-заглушки пока грузится контент. Повторяют форму реальных элементов. Лучше чем просто спиннер.

Появляется в углу экрана на 3–5 секунд. Не перекрывает контент. Показывает результат действия.

Dropdown — деструктивные действия внизу, отделены разделителем. Kbd — визуализация горячих клавиш.

Dialog — блокирует фон, для важных действий и подтверждений. Banner — не исчезает автоматически, для важных сообщений.

Никогда просто пустота. Структура: иконка + заголовок + описание + кнопка действия.

Панель инструментов с группами кнопок. Группы разделены вертикальной линией. Активное состояние — подсветка.

SM 28px — таблицы. MD 36px — карточки. LG 48px — профиль. Stack — группа участников с перекрытием.

Горизонтальная линия для разделения контента. Может содержать текст посередине.