Component Library
Библиотека компонентов — структурированный справочник всех UI-компонентов, входящих в состав дизайн-системы. В документации зафиксирована смысловая архитектура библиотеки: группировка компонентов по назначению, их определения, задачи и обоснование выбора каждого решения.
См. также: states.md — стандарты состояний компонентов, sizes.md — размерная шкала, theming.md — система тематизации на токенах.
Важно! Документ является живым артефактом и обновляется синхронно с развитием библиотеки компонентов. При добавлении, изменении или удалении компонента соответствующая запись в таблице актуализируется.
Детальные спецификации каждого компонента (анатомия, поведение, edge cases) находятся в [components/](../components/).
1. Как пользоваться документом
- При выборе компонента
- Найдите нужную группу по типу задачи (отображение, ввод, навигация, компонент поверх контента/обратная связь на действие)
- Выберите компонент с подходящим назначением
- При сомнении между компонентами — сравните колонки «Задача» и «Почему используется»: это поможет выбрать точное решение
- При добавлении нового компонента — убедитесь, что в документе нет существующего компонента с аналогичной задачей, и зафиксируйте новый по той же структуре
2. Структура библиотеки
Компоненты разделены на основные логические группы по типу взаимодействия пользователя с интерфейсом — от отображения данных до обратной связи системы. Каждая группа в свою очередь разделена на логические подгруппы.
- Actions — компоненты действия
- Data Display — отображение данных и контента
- Data Entry — ввод и редактирование данных
- Navigation — перемещение по контенту
- Overlay/Feedback — компоненты поверх контента / обратная связь системы
3. Actions / Компоненты действия
3.1 Actions & Buttons / Действия и кнопки
Компоненты для инициирования действий пользователем.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| Button (XXS, XS, S, M, L, XL) | Интерактивный элемент для выполнения действия | Запустить основное действие в интерфейсе | Является primary-паттерном вызова действия — текстовая метка чётко описывает, что произойдёт при нажатии |
| IconButton (XXS, XS, S, M, L, XL) | Кнопка только с иконкой | Выполнить действие в условиях ограниченного пространства | Экономит место в интерфейсах, когда действие однозначно передаётся иконкой |
| LinkButton (XXS, XS, S, M, L, XL) | Кнопка, стилизованная как текстовая ссылка | Выполнить второстепенное действие с минимальным визуальным весом | Подходит для вторичных действий, не конкурирует с основной кнопкой визуально |
| EmbeddedButton (S, M, L) | Кнопка, встроенная внутрь другого компонента | Выполнить контекстное действие внутри компонента | Размещается внутри компонента-контейнера, не нарушая внешний layout и сохраняя контекст действия |
4. Data Display / Отображение данных
Компоненты группы Data Display отвечают за представление информации пользователю. Они не принимают пользовательский ввод, а визуализируют данные, структурируют контент и помогают пользователю воспринимать информацию на экране.
4.1 Identity & Status / Идентификация и статус
Компоненты, представляющие сущности и их текущее состояние — пользователей, объекты, статусы и счётчики.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| Avatar (S, M, L, XL, XXL, Scalable) | Визуальное представление пользователя или сущности в виде изображения, инициалов или иконки | Идентифицировать пользователя или сущность в интерфейсе | Создаёт персональную привязку к контенту, мгновенно распознаётся пользователем как идентификатор личности |
| AvatarGroup (S, M, L, XL, XXL) | Отображение нескольких Avatar-элементов в виде компактной перекрывающейся группы | Показать набор участников, членов команды или пользователей, связанных с объектом | Компактно передаёт принадлежность нескольких людей к одному объекту |
| Badge (XS, S, M, L) | Небольшая метка, накладываемая на другой компонент | Сообщить о наличии новых событий, уведомлений или статуса объекта | Не занимает отдельного места в layout, визуально привязана к объекту, к которому относится |
| Counter (XXS, XS, S, M, L) | Числовой индикатор количества | Отобразить числовое значение — количество уведомлений, сообщений, элементов | Компактно передаёт количественную информацию без развёрнутого описания |
| Indicator (S, M, L) | Точечный или цветовой маркер состояния | Обозначить статус объекта — активен, недоступен, в процессе | Минималистичный способ передать состояние без использования текста |
| Rating (XS, S, M, L, H5, H4, H3, H2, DisplayS, DisplayM, DisplayL) | Визуальное отображение оценки в виде звёзд или произвольных элементов | Показать рейтинг или оценку объекта | Интуитивно понятный паттерн оценки, мгновенно считывается пользователем |
| Chip (XXS, XS, S, M, L, XL) | Компактный элемент в виде метки или тега для отображения атрибута, категории или выбранного значения | Визуально представить тег, фильтр или выбранное значение в компактной форме | Передаёт принадлежность объекта к категории или статусу компактно и без визуальной перегрузки — в отличие от Badge не накладывается на другой компонент, а существует самостоятельно |
| ChipGroup (XXS, XS, S, M, L, XL) | Контейнер для группы Chip-элементов с управлением расположением и переносом | Отобразить набор тегов, фильтров или выбранных значений как единую группу | Стандартизирует расположение и отступы между Chip-элементами, управляет переносом на новую строку и консистентностью группы |
4.2 Content & Media / Контент и медиа
Компоненты для отображения визуального контента — изображений, галерей и медиа.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| Image | Компонент для отображения изображения с поддержкой состояний загрузки и ошибки | Вывести графический контент в интерфейсе | Стандартизирует работу с изображениями в системе |
| Gallery | Компонент для отображения коллекции изображений или медиа-элементов | Представить набор визуальных материалов с возможностью просмотра | Организует множество медиа-элементов в управляемую структуру с навигацией между ними |
| Card (S, M, L) | Контейнер для группировки связанного контента — изображения, текста и действий | Представить сущность или объект как целостный блок информации | Создаёт визуально обособленный блок, объединяющий все атрибуты сущности в одном месте |
| CodeArea (XS, S, M, L, XL) | Блок для отображения программного кода с подсветкой синтаксиса | Показать фрагмент кода в читаемом форматированном виде | Сохраняет форматирование кода, обеспечивает читаемость через моноширинный шрифт и подсветку синтаксиса |
4.3 Lists & Structure / Списки и структура
Компоненты для структурирования и отображения наборов данных и списков.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| List (XS, S, M, L, XL) | Компонент для отображения упорядоченного набора элементов списком | Представить однотипные данные в виде последовательного перечня | Обеспечивает единообразное отображение однотипных элементов с консистентными отступами и разделителями |
| Accordion (XS, S, M, L, H5, H4, H3, H2) | Список со сворачиваемыми секциями контента | Показать структурированный контент, скрывая второстепенные детали до востребования | Экономит пространство экрана, позволяя пользователю раскрывать только нужные секции |
| Note (XS, S, M, L) | Компонент для отображения вспомогательной или пояснительной информации | Привлечь внимание к важному замечанию, подсказке или предупреждению | Визуально выделяет информацию из основного потока контента, не прерывая его структуру |
4.4 Layout & Dividers / Разметка и разделители
Компоненты для разметки пространства и визуального разделения контента.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| Divider | Разделительная линия | Визуально разделить секции или элементы интерфейса | Создаёт чёткую границу между блоками контента без использования отступов или цветовых фонов |
| Splitter | Интерактивный разделитель между двумя панелями с возможностью изменения их размера | Дать пользователю контроль над размером соседних областей интерфейса | Позволяет гибко перераспределять пространство между панелями в сложных layout-структурах |
4.5 Table / Таблицы
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| Table (XS, S, M, L) | Компонент для отображения структурированных данных в виде строк и столбцов | Представить табличные данные с возможностью сортировки, фильтрации и пагинации | Обеспечивает наглядное сравнение данных, упрощает восприятие структурированной информации и позволяет пользователю быстро находить нужные записи |
5. Data Entry / Ввод данных
Компоненты группы Data Entry обеспечивают взаимодействие пользователя с системой через ввод, выбор и передачу данных. Они принимают, валидируют и передают пользовательский ввод в систему.
5.1 Text Input / Текстовый ввод
Компоненты для ввода текстовых и числовых данных.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| TextField (XS, S, M, L, XL) | Однострочное поле для ввода текста | Принять короткий текстовый ввод от пользователя — имя, email, поисковый запрос и т.д. | Стандартный паттерн для однострочного ввода, поддерживает валидацию, placeholder и вспомогательный текст |
| TextArea (XS, S, M, L, XL) | Многострочное поле для ввода текста | Принять развёрнутый текстовый ввод — комментарий, описание, сообщение | Используется, когда ожидается длинный текст — позволяет пользователю видеть несколько строк одновременно |
| TextFieldSlider (XS, S, M, L, XL) | Текстовое поле со встроенным слайдером для числового ввода | Принять числовое значение в заданном диапазоне через ввод или перетаскивание | Комбинирует точность ручного ввода с наглядностью слайдера для числовых диапазонов |
| Range (XS, S, M, L, XL) | Компонент для ввода диапазона значений | Задать границы диапазона в одном компактном элементе, не используя два отдельных несвязанных поля | Используется, когда нужно задать начальное и конечное значение диапазона — например, цену «от» и «до», даты или любые числовые промежутки |
| Autocomplete (XS, S, M, L, XL) | Текстовое поле с выпадающим списком подсказок на основе введённого текста | Ускорить ввод за счёт предложения вариантов по мере набора | Снижает количество ошибок ввода и ускоряет заполнение форм через подсказки на основе существующих данных |
| CodeInput (DisplayS, DisplayM, DisplayL) | Поле для ввода короткого кода — PIN, OTP, верификационного кода | Принять структурированный короткий код с разбивкой по символам | Визуально разделяет символы: горизонтальный ряд графических элементов (точек). Каждая точка вмещает в себя один символ, введённый с клавиатуры |
| CodeField (S, M, L) | Поле для ввода короткого кода — PIN, OTP, верификационного кода | Принять структурированный короткий код с разбивкой по символам | Визуально разделяет символы кода на отдельные ячейки, снижая вероятность ошибки ввода |
5.2 Selection / Выбор значений
Компоненты для выбора одного или нескольких значений из набора.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| CheckBox (XS, S, M, L, XL) | Элемент для независимого выбора одного или нескольких вариантов | Позволить пользователю выбрать несколько значений из списка независимо друг от друга | Используется для множественного выбора — каждый чекбокс независим от остальных |
| RadioBox (XS, S, M, L, XL) | Элемент для выбора одного варианта из группы взаимоисключающих | Позволить пользователю выбрать ровно один вариант из нескольких | Используется для взаимоисключающих вариантов — выбор одного автоматически снимает остальные |
| Segment (XS, S, M, L, XL) | Группа элементов для переключения между несколькими категориями или разделами внутри одного экрана | Организовать навигацию между смысловыми группами контента, не уводя пользователя на другую страницу | Помогает структурировать информацию по категориям, быстро переключаться между блоками контента и визуально показывать, какой раздел активен в данный момент |
| Select (XS, S, M, L, XL) | Выпадающий список для выбора одного или нескольких значений | Выбрать значение из списка предопределённых вариантов | Экономит пространство, скрывая список до взаимодействия. Не даёт пользователю возможности вводить значение — только выбор |
| Combobox (XS, S, M, L, XL) | Поле ввода, которое позволяет выбирать значения из выпадающего списка или вводить собственные значения | Выбрать значение из списка или ввести произвольное значение | Используется, когда список вариантов не исчерпывающий и пользователь может добавить собственное значение |
| RatingInput (XS, S, M, L, H5, H4, H3, H2, DisplayS, DisplayM, DisplayL) | Интерактивный компонент для выставления оценки | Дать пользователю возможность оценить объект | Интуитивный паттерн оценки — пользователь сразу понимает, как взаимодействовать, без дополнительных инструкций |
| ColorPicker (S, M, L) | Интерактивный элемент интерфейса, позволяющий пользователю выбрать цвет из палитры, градиента или ввести значение вручную (HEX, RGB и др.) | Предоставить пользователю возможность выбрать или задать цвет в рамках интерфейса | Упрощает ввод цветовых значений, исключает ошибки ручного ввода, визуально демонстрирует результат выбора в режиме реального времени |
5.3 Date & Time / Дата и время
Компоненты для выбора дат и временных значений.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| CalendarGrid (XS, S, M, L, XL) | Сетка календаря | Отобразить и выбрать дату или диапазон дат в формате календарной сетки по дням и месяцам, годам, кварталам | Является базовым строительным блоком для DatePicker и DateTimePicker — может использоваться самостоятельно |
| DatePicker (XS, S, M, L, XL) | Комбинация текстового поля и выпадающего календаря с возможностью ввода и выбора значения | Дать пользователю возможность выбрать дату или диапазон дат посредством ввода текста либо путём выбора даты из календаря | Стандартный паттерн для выбора даты — скрывает календарь до взаимодействия, поддерживает ручной ввод и выбор |
| DateTimePicker (XS, S, M, L, XL) | Поле для ввода или выбора даты и времени одновременно с выпадающим календарём | Дать пользователю возможность выбрать точный момент времени — дату и время в одном контроле | Используется, когда нужно задать не просто дату, а конкретный момент — встреча, бронирование, расписание |
| TimePicker (XS, S, M, L, XL) | Поле для выбора времени суток с раскрывающимся списком значений | Дать пользователю возможность выбрать конкретное время | Специализированный контрол для ввода времени — удобнее обычного текстового поля за счёт визуального выбора значений |
5.4 File & Media Input / Загрузка файлов
Компоненты для загрузки файлов и медиаконтента.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| Attach (XS, S, M, L) | Компонент для прикрепления файла | Инициировать выбор и прикрепление файла к форме или сообщению | Компактный триггер загрузки файла — не занимает много места, встраивается в поля ввода и формы |
| Dropzone | Интерактивная область, предназначенная для перетаскивания и загрузки файлов | Принять один или несколько файлов от пользователя | Поддерживает drag-and-drop — более удобный способ загрузки файлов, чем стандартный input, особенно для множественной загрузки |
| File (XS, S, M, L) | Компонент для отображения загруженных файлов | Показать загруженный файл с возможностью просмотра или удаления | Стандартизирует отображение прикреплённого файла с его атрибутами — имя, размер, тип и действия над ним |
5.5 Form & InformationWrapper / Формы
Оболочки для полей ввода и контролов и группировка нескольких полей ввода или элементов управления.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| Form (XS, S, M, L) | Обёртка для группировки нескольких полей ввода или элементов управления, содержащая Header, FormList и Footer | Объединить набор полей в единую логическую форму с вертикальной или горизонтальной структурой | Управляет layout всей формы целиком — позволяет переключаться между FormVertical и FormHorizontal без изменения внутренних компонентов |
| FormItem (information wrapper) (XS, S, M, L) | Компонент-оболочка с набором вариаций и элементами управления формой | Обернуть отдельный элемент ввода в единую структуру с подписью, подсказкой и вспомогательными элементами | Стандартизирует отображение каждого поля — лейбл, подсказка и сам контрол всегда собраны в одном контейнере, что упрощает восприятие и валидацию |
6. Navigation / Навигация
Компоненты группы Navigation обеспечивают перемещение пользователя по интерфейсу — между страницами, разделами, экранами и уровнями иерархии. Они формируют структуру приложения и помогают пользователю ориентироваться в пространстве продукта.
6.1 Global Navigation / Глобальная навигация
Компоненты для перемещения между основными разделами продукта.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| NavigationBar | Верхняя панель с заголовком и действиями | Ориентировать пользователя в текущем экране и обеспечивать возврат на предыдущий уровень | Стандартный паттерн мобильных платформ (iOS/Android) — пользователь интуитивно знает, где он находится и как вернуться назад |
| NavigationDrawer | Боковая панель, выезжающая поверх контента | Отобразить навигационное меню или дополнительный контент без смены экрана | Экономит пространство, скрывая навигацию до вызова — особенно эффективен на мобильных и планшетных интерфейсах |
| DropdownMenu (XS, S, M, L, XL) | Выпадающее меню со списком навигационных пунктов или действий | Показать список доступных действий или переходов по триггеру | Скрывает вторичные пункты до взаимодействия — уменьшает визуальную нагрузку основного интерфейса |
| TabBar (M, L) | Нижняя панель вкладок для мобильного интерфейса | Обеспечить переключение между основными разделами приложения | Паттерн нижней навигации на мобильных устройствах — доступен большому пальцу, всегда виден на экране |
| Link (в дизайне компонент отсутствует — может быть стилизован текст любым типографическим токеном системы) | Текстовый элемент для перехода на другую страницу, раздел или внешний ресурс | Обеспечивать inline-навигацию внутри контента без использования кнопок и панелей | Минимально занимает место в интерфейсе — встраивается в текст и не перегружает контент дополнительными элементами управления |
6.2 Local Navigation / Локальная навигация
Компоненты для навигации внутри одного экрана или раздела.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| Tabs (XS, S, M, L) | Горизонтальные вкладки для переключения между разделами | Переключать отображение контента в рамках одного экрана | Организует контент одного уровня иерархии без перехода на новую страницу — пользователь остаётся в контексте |
| BreadCrumbs (XS, S, M, L) | Цепочка ссылок, отображающая путь пользователя в иерархии раздела | Показать текущее местоположение в структуре и дать быстрый доступ к родительским уровням | Паттерн навигации по иерархии — пользователь всегда знает, где он находится, и может вернуться на любой уровень |
| Tree (XS, S, M, L, XL) | Иерархический список с раскрываемыми узлами | Навигация по вложенной иерархической структуре | Наглядно передаёт иерархические отношения — подходит для файловых систем, категорий и многоуровневых структур |
| Steps (XS, S, M, L, XL, Simple) | Горизонтальный или вертикальный набор шагов многоэтапного процесса | Отображают прогресс через последовательность логических шагов. Также могут использоваться для навигации | Наглядно показывают пользователям этап процесса и сколько осталось до завершения |
6.3 Pagination & Scroll / Перелистывание и прокрутка
Компоненты для навигации по контенту — спискам, наборам и длинным страницам.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| Pagination (XS, S, M, L) | Компонент для постраничной навигации по большому набору данных | Разбить большой набор данных на страницы и обеспечить переход между ними | Стандартный паттерн для работы с большим количеством данных |
| PaginationDots (S, M) | Элементы переключения с индикатором текущей позиции | Отображают возможность перемещения между небольшим количеством однородных элементов контента | Компактный индикатор прогресса для карусели или онбординга — отображает позицию без числовых значений |
| Carousel | Компонент для горизонтального прокручивания набора элементов | Отобразить коллекцию элементов в ограниченном горизонтальном пространстве | Позволяет разместить больше контента, чем позволяет область видимости — пользователь листает по одному или группами |
| ScrollBar (S, M) | Кастомный компонент полосы прокрутки | Обеспечить прокрутку контента в области с ограниченной высотой или шириной | Стандартизирует внешний вид полосы прокрутки в рамках дизайн-системы — заменяет нативный скроллбар браузера |
7. Feedback / Обратная связь
Заметка автора в исходнике: «сейчас Overlay — предлагаю переименовать».
Компоненты группы Feedback обеспечивают обратную связь системы с пользователем. Они появляются поверх основного контента или в специально отведённых областях и сообщают о результатах действий, запрашивают подтверждение, предоставляют дополнительный контекст или отображают прогресс операций.
7.1 Dialogs & Sheets / Диалоги и панели
Компоненты для показа контента поверх основного экрана с блокировкой или без.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| Modal | Диалоговое окно, блокирующее взаимодействие с основным контентом | Запросить подтверждение действия или показать критически важный контент, требующий реакции | Блокирует фон — используется только для задач, требующих немедленного решения пользователя |
| BottomSheet | Панель, появляющаяся снизу экрана поверх контента | Показать дополнительные действия или контент на мобильном устройстве | Паттерн мобильных интерфейсов — появляется в зоне досягаемости большого пальца, не полностью перекрывает контекст |
| Drawer | Боковая панель, выезжающая поверх основного контента | Отобразить дополнительный контент или форму, не переходя на новую страницу | Сохраняет контекст основного экрана, позволяя работать с дополнительным контентом в боковой панели |
| Toolbar | Панель инструментов с набором действий | Предоставить быстрый доступ к часто используемым инструментам для работы на основном экране | Группирует связанные действия в единую панель, доступную без навигации к другим разделам |
7.2 Notifications & Alerts / Уведомления и оповещения
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| Popover (S, M) | Всплывающий контейнер с расширенным контентом, привязанный к триггеру | Показать дополнительный контент по взаимодействию с триггером | Привязан к триггеру и не блокирует интерфейс |
| Toast | Временное всплывающее уведомление | Сообщить пользователю о результате выполненного действия | Появляется и исчезает автоматически, не блокирует интерфейс — подходит для некритичных уведомлений о статусе операции |
| Notification | Уведомления поверх контента с возможностью закрытия | Сообщить пользователю о важном событии или состоянии системы, требующем внимания | В отличие от Toast используется для важных сообщений, которые нельзя пропустить |
| Tooltip | Небольшая всплывающая подсказка по наведению или фокусу | Дать краткое пояснение к элементу интерфейса — иконке, кнопке, полю | Появляется только при наведении — идеален для пояснений без перегрузки интерфейса |
7.3 Progress & Loading / Прогресс и загрузка
Компоненты для отображения прогресса операций поверх основного контента.
| Компонент | Определение | Задача | Почему используется |
|---|---|---|---|
| ProgressBar (XS, S, M, L) | Горизонтальная полоса загрузки с известным процентом завершения | Показать прогресс операции с определённой длительностью | Используется, когда известен процент выполнения — даёт пользователю понимание, сколько осталось ждать |
| ProgressBarCircular (XXS, XS, S, M, L, XL, XXL, Scalable) | Круглый индикатор загрузки с известным процентом завершения | Показать прогресс операции с определённой длительностью | Используется, когда известен процент выполнения — даёт пользователю понимание, сколько осталось ждать |
| Loader | Индикатор загрузки контента | Уведомляет пользователей о том, что загрузка контента началась | Используется, когда нужно обозначить пользователю загрузку контента |
| Spinner (XXS, XS, S, M, L, XL, XXL, Scalable) | Частный случай Loader в виде крутящегося элемента, который сообщает о самом процессе загрузки | Сообщить пользователю, что система обрабатывает запрос неизвестной длительности | Используется, когда невозможно предсказать время завершения операции — даёт обратную связь без конкретных цифр |
| Skeleton (в дизайне компонент отсутствует — элементы интерфейса стилизуются токенами) | Индикатор загрузки контента | Визуально показать загрузку контента на странице | Снижает воспринимаемое время ожидания, сохраняет структуру страницы до появления реальных данных |
Нашли расхождение документации и библиотеки — напишите команде.Сообщить о расхождении