UI-buttons

Buttons

Основные кнопки UI имеют несколько стилей:

Дефолтная синяя кнопка - button
Синяя кнопка с синей обводкой - button button--invert
Синяя кнопка без обводки и заливки - button button--transparent
Дефолтная красная кнопка - button button--red
Красная кнопка c красной обводкой - button button--red button--red--invert
Красная кнопка без обводки и заливки - button button--red button--red--transparent

У кнопок есть состояния:

Дефолтное
Наведение
Нажатие
Disabled (только для тега button)
Focus (нужно уточнить с дизайнером)

У кнопок есть 2 размера по высоте:

Высота 60px (дефолтная) - button
Высота 40px - button button--sm

Важно! будть то ссылка или тег button, всегда первый класс должен быть "button" а затем нужный модификатор для отображения того или иного видеа кнопки

Кнопки с помощью тега <a>

Normal Normal Normal Normal Normal Normal

Кнопки с помощью тега <a> маленькие

Normal Normal Normal Normal Normal Normal

Кнопки с помощью тега <a> версия для маленьких экранов

Normal Normal Normal Normal Normal Normal

Кнопки с помощью тега <button>

Кнопки с помощью тега <button> маленькие

Кнопки с помощью тега <button> версия для маленьких экранов

Кнопки с иконками

Для каждой кнопки применяется модификатор button--icon + модификатор стиля (button--icon--invert, button--icon--transparent и тд), так же нужно добавлять модификатор для отображения той или иной иконки (в данном случае модификатор иконки button--icon--filter), в последущем будут добавлться нужные модификаторы для каждой иконки

Кнопки с иконками меньшего размера

Кнопки с иконками для маленьких экранов