Text Button

Текстовая кнопка используется, когда необходимо обозначить ключевое или стартовое действие на странице. Например, начать заполнение формы или завершить работу с формой (сохранить). Кнопка с иконкой используется в случаях, когда, недостаточно только текста или только иконки, чтобы проинформировать о действии. Иконки следует располагать либо слева, либо справа от текста.

Обзор

Анатомия

Текст

Текст кнопки - одна из наиболее важных ее составляющих

Используйте текст, который явно сообщит пользователю о действии, которое произойдет при клике

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

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

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

Нельзя сокращать текст кнопки, если он не не помещается

Иконка

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

Не используйте две иконки в одной кнопке

Типы

Text Button

Текстовая кнопка используется, когда необходимо обозначить ключевое или стартовое действие на странице. Например, начать заполнение формы или завершить работу с формой (сохранить). Кнопка с иконкой используется в случаях, когда, недостаточно только текста или только иконки, чтобы проинформировать о действии. Иконки следует располагать либо слева, либо справа от текста.

Text Button

Icon Button

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

Icon Buttn

Split Button

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

Split Button