Button
Polymorphic кнопка/ссылка с матрицей variant × mode × size и состояниями.
Modes
solid · outline · ghost · link — каждый с primary variant, во всех размерах
solidoutlineghostlinkVariants × solid
10 цветовых вариантов в основном режиме
defaultprimarysecondarysuccesswarningdangerinfolightdarkmutedVariants × outline
defaultprimarysecondarysuccesswarningdangerinfolightdarkmutedVariants × ghost
defaultprimarysecondarysuccesswarningdangerinfolightdarkmutedVariants × link
defaultprimarysecondarysuccesswarningdangerinfolightdarkmutedSizes
xs · sm · md · lg · xl
Icons
startIcon / endIcon — размер md, разные комбинации иконок и вариантов
startIconendIconbothIcon only
Квадратная кнопка-иконка (mode=utility). Таблица: иконка → назначение.
| Иконка | Подпись | Для чего |
|---|---|---|
| Настройки | Открыть панель настроек | |
| Удалить | Удалить элемент списка | |
| Сохранить | Подтвердить и сохранить | |
| Закрыть | Закрыть диалог / отменить | |
| Редактировать | Перейти в режим редактирования | |
| Добавить | Создать новую запись | |
| Информация | Показать подсказку или справку | |
| Предупреждение | Обратить внимание на риск | |
| Избранное | Добавить в избранное | |
| Лайк | Отметить как понравившееся | |
| Поделиться | Открыть меню шеринга | |
| Обновить | Перезагрузить данные | |
| Поиск | Открыть строку поиска | |
| Фильтры | Открыть панель фильтров | |
| Меню | Открыть контекстное меню | |
| Скачать | Скачать файл / экспорт | |
| Уведомления | Открыть центр уведомлений | |
| Заблокировать | Закрыть доступ |
Utility mode
Квадратная иконка-кнопка. children = иконка.
sizesvariantsClose mode
Серая иконка-крест, round
Loading & Disabled
Во всех размерах
loading / xsloading / smloading / mdloading / lgloading / xldisabled / xsdisabled / smdisabled / mddisabled / lgdisabled / xlhoverVariant
Переопределяет цвет только на hover (solid/outline), во всех размерах
solid / xssolid / smsolid / mdsolid / lgsolid / xloutline / xsoutline / smoutline / mdoutline / lgoutline / xlAs link (href)
Получает href → рендерится <a>, иначе <button>. Во всех размерах.
Tooltip
Подсказка на hover/focus через Radix Tooltip, во всех размерах
xssmmdlgxl