Кнопки

Как называть
Стили кнопок
Размеры и отступы
Brand button
Simple button
List button
Кнопки с иконками
Круглые кнопки
Текстовые кнопки
Мобильная версия

Как называть

  1. Для названия кнопок используется шрифт Museo Sans 500.
  2. Название кнопки описывает вызываемое действие, которое выражается глаголом совершенного вида в инфинитиве. Глагол отвечает на вопрос «Что сделать?».
  3. Существуют исключения, когда название кнопки — это утверждение от первого лица. Например, «Я принимаю».
  4. Название кнопки всегда емкое и краткое, занимает одну строку без сокращений. Рекомендуем ограничиться двумя словами.

Типографика

Для размера Accent используйте Body L 500 (Compact);
для размера Normal — Body M 500 (Normal);
для размера Minor — Body S 500 (Compact).

Стили кнопок

В продуктах QIWI используются два стиля кнопок — Brand button и Simple button. Неактивное состояние для них одинаково.

Для каждого стиля кнопок предусмотрено 3 размера. При проектировании новых экранов выбирайте уже существующие размеры и не вводите новые.

Внутри контентного блока может находиться только одна оранжевая кнопка.

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

Размеры и отступы

Вертикальные отступы

Горизонтальные отступы

Зона клика

Для каждого размера задается минимальная ширина кнопки. Если ширина текста меньше зоны клика, блок выравнивается по центру кнопки.

Brand button

Цвета кнопок

Brand button в размерах Normal и Minor используются для приоритетных или завершающих действий на странице.

Brand button в размере Accent используется в качестве основной кнопки в промо-коммуникациях и платежных формах.

Тени

Статичное
состояние
#FF8C00, 20%,
rgba (255, 140, 0, 20)
размытие: 16px,
Y: 12px
Наведенное
и нажатое
состояние
#FF8C00, 40%,
rgba (255, 140, 0, 40)
размытие: 20px,
Y: 12px

Simple button

Используются для второстепенных действий.

List button

Используются, когда необходимо разместить больше двух кнопок рядом.

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

РазмерAccentNormalMinor
Иконка, px24×2424×2424×24
Отступ, px886

Добавляйте иконки, чтобы проиллюстрировать название кнопки. Желательно, чтобы цвет иконки совпадал с цветом текста. Цветные логотипы размещайте в Simple button.

Иконка и текст выравниваются по центру как единый блок, когда у кнопки с иконкой вручную увеличена ширина.

Круглые кнопки

Кнопки с иконкой без текста чаще всего используются в Simple button. Поведение иконки при наведении и нажатии повторяет поведение текста на кнопке.

Цвета кнопок

Текстовые кнопки

Цвет текстовых кнопок

Текстовая кнопка  это кликабельный элемент для совершения неприоритетного действия. Применяется для экономии места.

Рекомендуется располагать справа или снизу от Simple Button. На сайте текстовые кнопки используются в тех же размерах, что и основной текст.

Мобильная версия

Для мобильной версии сайта, как и для десктопа, предусмотрено три основных размера кнопок — Accent (48px), Normal (40px) и Minor (32px).

Мобильные кнопки в размере Accent чаще всего растягиваются на всю ширину контентного блока или страницы. Отступы внутри кнопки не учитываются.

Simple Button Minor в шапке и Simple Button Normal в фильтрах истории используются со стандартными отступами.

Вертикальная группа

Горизонтальная группа

Кнопка и ссылка

Далее «Лоадеры и плейсхолдеры»