Компоненты
Кнопки
Основные, тихие, опасные, золотые кнопки, кнопки-иконки, группы и состояния.
Основные кнопки
На странице одно основное действие — ui-button-primary. Остальные — ui-button-quiet. Опасное действие (удаление, остановка) — только в окне подтверждения, ui-button-danger.
Виды
С иконкой
Размер: обычная · маленькая (в таблице и панели)
Состояния
Во всю ширину (под формой на телефоне)
Правила
- Текст — глагол: «Сохранить», «Новая фирма», «Отправить». «OK» не пишем.
- Порядок в ряду: слева «Отмена» (тихая), справа действие (основная).
- На телефоне и сенсорном экране высота не меньше 44 px (min-h-[44px]).
- Один радиус везде: поле, кнопка, страницы и переключатели — 12 px (выбор внутри — 9 px), как у «Список / Карточки».
Кнопка-иконка и закрытие (×)
Действия строки таблицы и инструменты панели — иконки. Название — под курсором (data-tip) и в aria-label для экранного диктора. Окно закрывается только ×, слово «Закрыть» не пишется.
Действия строки
Закрытие окна
Правила
- data-tip и aria-label — один и тот же текст.
- Иконка удаления — с классом «xavf»: при наведении красная.
- 36 px, на сенсорном экране 44 px.
Кнопка-ссылка и текстовое действие
Второстепенное действие — текстом: «Сбросить фильтр», «Смотреть все». Опасное текстовое действие при наведении красное.
Группа кнопок
Выбор одного из нескольких видов. «korinish» — вид внутри страницы (разделы отчёта, период); группа иконок — «Список / Карточки».
Выбор вида
Группа иконок
Правила
- Выбранное — мягкий изумрудный фон, aria-current или aria-pressed.
- Не для вкладок — они в «Навигации», подчёркнутый ряд.
Нижняя панель действий (телефон)
В длинной форме на телефоне основная кнопка прилипает внизу — там, где достаёт палец.