Кнопка Button

Давно не обновляли

Кнопка запускает действие.

В современных веб-интерфейсах кнопки и ссылки часто выглядят похоже — кнопки могут выглядеть как ссылки и наоборот, в зависимости от того, как дизайнер проектирует интерфейс.

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

Кнопка реагирует на наведение курсора мыши и нажатие. Незаблокированная кнопка в светлой теме становится темнее.

Действие, которое запускает кнопка, запускается только после того, как кнопка отпущена, и только в том случае, если курсор мыши в момент нажатия и отпускания находился над кнопкой.

Название кнопки пишется с заглавной буквы.

Название кнопки должно однозначно говорить о том, что произойдёт, если на неё нажать. Плохо, если нужно прочитать всё содержимое модального окна, чтобы понять, что делает кнопка.

Называйте кнопку инфинитивом в совершенной форме — название отвечает на вопрос «Что сделать?». Пользователь даёт команду компьютеру, ориентированную на результат, а не процесс.

Существуют исключения, когда название кнопки формулируется от первого лица:

Старайтесь не называть кнопку в две строки: делайте кнопку шире или меняйте название.

В гайдлайнах настольных операционных систем рекомендуется заканчивать название кнопки многоточием, если по нажатию будут запрашиваться дополнительные параметры. Многоточие призвано сделать поведение системы более предсказуемым. У этого правила есть ряд недостатков и исключений, которые делают его использование нецелесообразным:

• в наших интерфейсах много отложенных действий, а многоточие, размноженное в нескольких кнопках, превращается в визуальный шум;
• неопытные пользователи не замечают многоточия или не понимают, что оно значит, могут даже предположить, что название кнопки не вошло и поэтому обрезалось;
• кнопка с многоточием смотрится несбалансированной;
• действия с подтверждениями (например, «Удалить») по гайдлайнам должны быть без многоточия — тот случай, когда исключение встречается чаще основного правила.

Поэтому в сервисах Контура многоточие в названиях действий не используется. Во многих случаях его можно просто убрать. Если есть опасения, что пользователь побоится нажимать кнопку с необратимым действием — смените название. Из названия должно быть понятно, что действие не финальное.

Или поясните рядом с кнопкой:

Нельзя сокращать название кнопки, если оно не входит:

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

Не ставьте иконки в терминальных кнопках окна «Сохранить», «Отменить» и т.д.

В панели с большим количеством кнопок иконки будут создавать лишний визуальный шум. В этом случае оставьте иконки только у самых важных действий.

Обычные кнопки — белые с серой рамкой:

Кнопки главного действия на экране — чёрные или в цвет продукта. Например, кнопка «Добавить сотрудника» в модальном окне добавления сотрудника. Или кнопка «Сохранить» на странице редактирования реквизитов. Главная кнопка на экране может быть только одна.

В проектах могут использоваться кнопки фирменного цвета:

Жёлтый — действия, связанные с оплатой сервисов:

Красный — необратимое или негативное по смыслу действие. Зелёный — действие с положительной окраской. Зелёную кнопку уместно ставить, только если рядом есть красная кнопка с обратным смыслом:

Существует 3 стандартных размера кнопки:

Маленькие — используйте рядом с полями ввода, они соответствуют им по высоте.

Средние — используйте в модальных окнах и крупных блоках, для действий со списками и таблицами на верхней залипающей панели.

Большие — используйте как главные кнопки экрана или формы для сохранения и отмены, перехода к следующему экрану.

Ширина кнопки задаётся размером текста внутри неё и стандартными отступами. Нельзя произвольно уменьшать отступы:

Увеличивать отступы можно:

• если это делает кнопку более пропорциональной остальным элементам страницы;
• если текст внутри кнопки короткий и кнопка выглядит маленькой.

В мастерах используйте кнопки-стрелки.

Кнопка не может быть неправильной или обязательной для нажатия, поэтому следующие состояния не предусматриваются:

Фокус на кнопке визуально отображается только при работе с клавиатурой: если перенести на неё фокус табом, появляется чёрная рамка. Если кнопка в фокусе, то при нажатии клавиши Enter кнопка нажимается и выполняет указанное действие.

При клике мышью или тапом на тачскрине кнопка получает фокус, но визуально не отображает его.

На время выполнения действия на кнопке или рядом с ней можно размещать спиннер. При этом кнопка блокируется, если она была цветной — превращается в серую.

Лучше располагать спиннер рядом с кнопкой, если есть место.

Если в кнопке есть иконка — можно подменять иконку.

Когда текст кнопки заменяется на спиннер, ширина кнопки не меняется.