Как называть
Стили кнопок
Размеры и отступы
Brand button
Simple button
List button
Кнопки с иконками
Круглые кнопки
Текстовые кнопки
Мобильная версия
Как называть
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Buttons-Names@2x-1024x813.png)
- Для названия кнопок используется шрифт Museo Sans 500.
- Название кнопки описывает вызываемое действие, которое выражается глаголом совершенного вида в инфинитиве. Глагол отвечает на вопрос «Что сделать?».
- Существуют исключения, когда название кнопки — это утверждение от первого лица. Например, «Я принимаю».
- Название кнопки всегда емкое и краткое, занимает одну строку без сокращений. Рекомендуем ограничиться двумя словами.
Типографика
Для размера Accent используйте Body L 500 (Compact);
для размера Normal — Body M 500 (Normal);
для размера Minor — Body S 500 (Compact).
Стили кнопок
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Buttons-Syles@2x-1024x350.png)
В продуктах QIWI используются два стиля кнопок — Brand button и Simple button. Неактивное состояние для них одинаково.
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Buttons-Sizes@2x-1024x629.png)
Для каждого стиля кнопок предусмотрено 3 размера. При проектировании новых экранов выбирайте уже существующие размеры и не вводите новые.
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Buttons-Block@2x-1024x381.png)
Внутри контентного блока может находиться только одна оранжевая кнопка.
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Buttons-Block-02@2x-1024x381.png)
Используйте кнопку без тени внутри блоков с собственной глубокой тенью. Например, в модальных окнах.
Размеры и отступы
![](https://qiwiguide.ru/wp-content/uploads/2019/07/Padding_Btn_qiwi.com_-1024x309.png)
Вертикальные отступы
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Buttons-Group-Ver@2x-1024x444.png)
Горизонтальные отступы
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Buttons-Group-Hor@2x-1024x586.png)
Зона клика
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Buttons-Click-Zone@2x-1024x702.png)
Для каждого размера задается минимальная ширина кнопки. Если ширина текста меньше зоны клика, блок выравнивается по центру кнопки.
Brand button
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Brand-Button@2x-1024x602.png)
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
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Simple-Button@2x--1024x602.png)
Используются для второстепенных действий.
List button
![](https://qiwiguide.ru/wp-content/uploads/2019/01/List-Buttons@2x-1024x578.png)
Используются, когда необходимо разместить больше двух кнопок рядом.
Кнопки с иконками
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Buttons-Icon@2x-1024x572.png)
Размер | Accent | Normal | Minor |
Иконка, px | 24×24 | 24×24 | 24×24 |
Отступ, px | 8 | 8 | 6 |
Добавляйте иконки, чтобы проиллюстрировать название кнопки. Желательно, чтобы цвет иконки совпадал с цветом текста. Цветные логотипы размещайте в Simple button.
![](https://qiwiguide.ru/wp-content/uploads/2017/11/Снимок-экрана-2017-11-24-в-12.33.01-300x165.png)
Иконка и текст выравниваются по центру как единый блок, когда у кнопки с иконкой вручную увеличена ширина.
Круглые кнопки
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Round-Buttons@2x-1024x353.png)
Кнопки с иконкой без текста чаще всего используются в Simple button. Поведение иконки при наведении и нажатии повторяет поведение текста на кнопке.
Текстовые кнопки
![](https://qiwiguide.ru/wp-content/uploads/2018/12/Text-Buttons@2x-1024x378.png)
Текстовая кнопка — это кликабельный элемент для совершения неприоритетного действия. Применяется для экономии места.
Рекомендуется располагать справа или снизу от Simple Button. На сайте текстовые кнопки используются в тех же размерах, что и основной текст.
Мобильная версия
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Buttons-Mobile-1024x677.png)
Для мобильной версии сайта, как и для десктопа, предусмотрено три основных размера кнопок — Accent (48px), Normal (40px) и Minor (32px).
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Mobile-Button-Accent.png)
Мобильные кнопки в размере Accent чаще всего растягиваются на всю ширину контентного блока или страницы. Отступы внутри кнопки не учитываются.
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Mobile-Button-Norm-1024x466.png)
Simple Button Minor в шапке и Simple Button Normal в фильтрах истории используются со стандартными отступами.
Вертикальная группа
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Vertical-Group@2x-1024x397.png)
Горизонтальная группа
![](https://qiwiguide.ru/wp-content/uploads/2019/02/Horisontal-Group@2x-1024x397.png)
Кнопка и ссылка
![](https://qiwiguide.ru/wp-content/uploads/2019/02/ButtonLink@2x-1024x397.png)