Компонентыlink

Компоненты SF UI закрывают типовые интерфейсные задачи: ввод данных, выбор значений, навигацию, обратную связь, загрузку файлов и отображение состояний. В отличие от утилит, компоненты описывают готовые UI-паттерны с заданной структурой, поведением и набором модификаторов.

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

Принципыlink

Компонент отвечает за семантику и ожидаемое поведение элемента интерфейса.
Варианты компонента задают основные состояния и сценарии использования.
Утилиты применяются поверх компонента точечно, когда нужно встроить его в конкретный макет.
Интерактивные компоненты должны сохранять понятные состояния: фокус, hover, disabled, loading, opened, selected.

Категорииlink

Действия — кнопки, икон-кнопки, закрытие, скачивание файла.
Ввод и выбор — поля, checkbox, radio, switch, toggle, range slider.
Навигация — меню, dropdown, пагинация, шаги.
Обратная связь — alert, toast, tooltip, progress, spinner, skeleton.
Контент и представление — avatar, badges, tags, featured icon, placeholder, slider.
Оверлеи — modal и context menu.

Список компонентовlink

Компонент	Роль	Когда использовать
`accordion`	Сворачиваемые секции	Когда нужно показать несколько блоков, но не перегружать страницу деталями.
`alert`	Статусное сообщение	Для ошибок, предупреждений, успешных операций и важной информации.
`avatar`	Представление пользователя или объекта	В профилях, списках участников, карточках и группах.
`badges`	Короткая метка	Для статусов, категорий, счётчиков и компактных признаков.
`buttons`	Основное действие	Для команд, подтверждений, переходов и запуска операций.
`checkbox`	Множественный выбор	Когда пользователь может выбрать несколько независимых опций.
`close`	Закрытие элемента	В модальных окнах, уведомлениях, панелях и тегах.
`context-menu`	Контекстные действия	Для меню, привязанного к объекту или области интерфейса.
`download-file`	Скачивание файла	Когда нужно явно показать файл, его состояние или действие загрузки.
`dropdown`	Выпадающий список действий или выбора	Для компактного выбора, меню и вложенных списков.
`featured-icon`	Акцентная иконка	В карточках, пустых состояниях, уведомлениях и промо-блоках.
`file-upload`	Загрузка файлов	Для выбора, перетаскивания и интерактивной отправки файлов.
`icon-buttons`	Компактное действие с иконкой	В тулбарах, списках, карточках и плотных интерфейсах.
`inputs`	Ввод текста	Для форм, поиска, textarea и специализированных полей.
`menu`	Список навигации или команд	Для вертикальных и горизонтальных групп действий.
`modal`	Диалог поверх страницы	Для подтверждений, форм, деталей и сценариев, требующих фокуса.
`pagination`	Постраничная навигация	Когда длинный список разбит на страницы.
`placeholder`	Пустое состояние	Когда данных нет, они ещё не выбраны или недоступны.
`progress`	Прогресс процесса	Для загрузки, выполнения задач и шкал состояния.
`radio-button`	Выбор одного варианта	Когда из группы опций можно выбрать только одну.
`range-slider`	Выбор значения или диапазона	Для числовых фильтров, настроек и шкал.
`reference-link`	Справочная ссылка	Для переходов к дополнительной информации или документации.
`skeleton`	Состояние загрузки контента	Пока данные ещё загружаются, но структура экрана известна.
`slider`	Переключение между слайдами	Для каруселей, галерей и последовательного просмотра.
`spinner`	Краткое ожидание	Для локальной загрузки, когда прогресс неизвестен.
`step`	Шаг процесса	Для мастеров, сценариев оформления и многоэтапных форм.
`switch`	Бинарная настройка	Для включения или выключения режима.
`tags`	Набор выбранных значений	Для фильтров, категорий, меток и чипов.
`toast`	Временное уведомление	Для ненавязчивой обратной связи после действия.
`toggle`	Переключение варианта	Для компактного выбора режима или состояния.
`tooltip`	Контекстная подсказка	Для короткого пояснения элемента без изменения макета.

Часто используемыеlink

buttons
icon-buttons
inputs
checkbox
radio-button
dropdown
modal
alert
tooltip
pagination