Text Button

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

Обзор

Анатомия

Текст

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

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

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

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

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

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

Иконка

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

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

Типы

Text Button

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

Text Button

Icon Button

Split Button