Кнопки

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

Принципы

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

Четкая обратная связь : внешний вид кнопки должен четко меняться при разных состояниях взаимодействия (наведение курсора, нажатие, фокус), чтобы обеспечить немедленную обратную связь.

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

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

Использование и размещение

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

check_circle

Делать

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

cancel

Не

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

check_circle

Делать

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

cancel

Не

используйте кнопку как статичный декоративный элемент.

Анатомия

Настройка

Кнопки доступны в двух вариантах: стандартном и большом, а также в состояниях по умолчанию, в фокусе и в нажатом состоянии. Для большей выразительности, ясности и узнаваемости кнопки можно использовать значки. Размер кнопки может подчеркнуть её важность.