Общие правила использования кнопок.
Стили кнопок
Размеры и отступы
Brand Button
Simple Button
Simple Button List
White Button
Text Button
Стили кнопок
![](https://qiwiguide.ru/wp-content/uploads/2019/03/All-Buttons-Styles-Android@2x-1024x237.png)
В продуктах QIWI используются два стиля кнопок — Brand button и Simple button. Неактивное состояние для них одинаково.
Размеры и отступы
![](https://qiwiguide.ru/wp-content/uploads/2019/03/All-Buttons-Sizes-Android@2x-1024x665.png)
Big button
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Android-Button-Styles-@2x-1024x916.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Paddings-Android@2x-1024x429.png)
Small button
![](https://qiwiguide.ru/wp-content/uploads/2019/03/Android-Button-Styles-small@2x--1024x620.png)
Размер Small используется для экономии места внутри контентных блоков и небольших по размеру карточек.
Brand button
![](https://qiwiguide.ru/wp-content/uploads/2019/03/Brand-Button-Android@2x--1024x434.png)
Big Brand button | Roboto Medium | 16sp |
Small Brand button | Roboto Medium | 14sp |
Используются для важных завершающих действий.
![](https://qiwiguide.ru/wp-content/uploads/2019/05/Кнопка-с-тенью-Android-1024x381.png)
Цвет тени | #FF8C00, rgb (255, 140, 0) |
Прозрачность тени | 30% |
Смещение по Y | 8dp |
Размытие | 12dp |
В случаях, когда кнопка зафиксирована в нижней части экрана и не перемещается при скролле, к ней добавляется тень.
Simple button
![](https://qiwiguide.ru/wp-content/uploads/2019/03/Simple-Button-Android@2x-1024x434.png)
Big Simple button | Roboto Regular | 16sp |
Small Simple button | Roboto Regular | 14sp |
Используется в сочетании с Brand button, а также самостоятельно для обозначения второстепенных действий.
Simple button List
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Simple-Button-List-Android@2x-1024x402.png)
Используются, когда необходимо разместить больше двух кнопок рядом. Например, на постоплатном экране или в разделе истории в модальном окне.
White button
![](https://qiwiguide.ru/wp-content/uploads/2019/02/White-button-Android@2x-1024x372.png)
Используется в контентных блоках с цветными фонами. Например, в промо-блоке в разделе идентификации.
Наследует стили текста Simple button, при наведении ведет себя так же. В отличие от Simple button у White button нет обводки.
![](https://qiwiguide.ru/wp-content/uploads/2019/02/White-button-Android-01-@2x-1024x444.png)
Чаще всего применяется без тени. В редких случаях, когда тень нужна, она добавляется в виде отдельной картинки. Пример такого использования кнопки — блок счетов на главной странице.
Text button
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Text-Buttons-Android@2x-1024x401.png)
Текстовые кнопки полностью дублируют стили ссылок и используются в тех же размерах, что и основной текст.