Кнопки
Кнопка - это главный элемент взаимодействия с пользователем. Они используются в качестве основной навигации для совершения или подтверждения действия пользователя.
Виды кнопок
В Q.Palette существует 5 основных видов кнопок, каждый из видов используется в определенный случаях.
Основная кнопка (Primary)
Кнопки вида Primary используются для основного действия в сценарии пользователя, например, для добавления новой записи. Они имеют яркий фон, благодаря чему обращают на себя внимание.
| No icon (По умолчанию) | Disabled | Icon left | Icon right | Icon |
|---|---|---|---|---|
 |  |  |  |  |
Правила использования основной кнопки
- Количество. На экране может быть только одна Primary кнопка, которая ведет по основному сценарию. Пользователь должен быстро ее идентифицировать.
- Название кнопки. Постарайтесь подобрать наиболее точный глагол для описания того, что произойдет. Оставьте только самую суть, в названии не должно быть больше двух слов.
- Использование иконки. Используйте иконку вместе с текстом только в том (крайнем!) случае, если не получается с помощью глагола описать то, что произойдет после клика на кнопку. Использование иконки вместе с текстом — исключение.
Приподнятая кнопка (Raised)
Кнопки вида Raised используются для второстепенного действия в сценарии пользователя, например, для фильтрации записей, обновления грида или действий в строке записи.
| No icon (По умолчанию) | Disabled | Icon left | Icon right | Icon |
|---|---|---|---|---|
 | |  |  |  |
Правила использования основной кнопки
- Количество. На экране может быть одна (предпочтительный вариант) или несколько приподнятых кнопок.
- Название кнопки. Постарайтесь подобрать наиболее точный глагол для описания того, что произойдет. Оставьте только самую суть, в названии не должно быть больше двух слов.
- Использование иконки. Используйте иконку вместе с текстом только в том случае, если не получается с помощью глагола описать то, что произойдет после клика на кнопку. Если есть возможность заменить текст кнопки иконкой, то сделайте это — для приподнятой кнопки это хороший вариант.
- Не допускается использовать приподнятую кнопку вместо основной в рамках основного сценария. Даже если экран с ней выглядит более привлекательно.
Второстепенная кнопка (Secondary)
Кнопки вида Secondary являются кнопками самого низкого приоритета и используются, для отмены действий.
| No icon (По умолчанию) | Disabled | Icon |
|---|---|---|
 |  |  |
Деструктивная кнопка (Danger)
Кнопки вида Danger используются, в основном, для деструктивных действий. Чаще всего это кнопка “Удалить”.
| No icon (По умолчанию) | Disabled | Icon |
|---|---|---|
 |  |  |
Правила использования второстепенной кнопки
- Количество. На экране может быть только одна деструктивная кнопка, так как она ведет пользователя по основному сценарию. Это акцентная кнопка, она должна привлекать внимание пользователя.
- Название кнопки. Постарайтесь подобрать наиболее точный глагол для описания того, что произойдет. В основном, кнопка содержит глагол “Удалить”.
- Использование иконки. В веб версии желательно не заменять текст на иконку.
- Не допускается использовать кнопку типа Danger в таблице в строке записи, так как в данном случае удаление — это второстепенное действие в сценарии пользователя.
Предупреждающая кнопка (Warning)
Кнопки вида Warning используются, в основном, в модальных окнах, которые носят предупреждающий характер. Чаще всего это кнопка “Подтвердить”.
| No icon (По умолчанию) | Disabled | Icon |
|---|---|---|
 | |  |
- Контекст. Кнопка используется в модальных окнах.
- Количество. На экране может быть только одна предупреждающая кнопка, так как она ведет пользователя по основному сценарию. Это акцентная кнопка, она должна привлекать внимание пользователя.
- Название кнопки. Постарайтесь подобрать наиболее точный глагол для описания того, что произойдет.
- Использование иконки. В веб версии желательно не заменять текст на иконку.
Комбинации кнопок
- В ряду кнопок (и на экране, в целом) может быть только одна основная кнопка.
- Располагайте основную кнопку справа, второстепенную или приподнятую кнопку — слева.
🔴 Плохо
🟢 Хорошо
