Каждое из состояний имеет свое название и применение. Они позволяют пользователю понимать, что происходит в интерфейсе и что произойдет после нажатия на кнопку.
Default (обычное состояние)
Это состояние кнопки по умолчанию. То есть, с ней ничего ещё не произошло. Кнопка имеет стандартный вид и цвет.
Hover (состояние при наведении)
Используется при наведении курсора мыши на кнопку. Она может изменить цвет, можно добавить анимацию. Так пользователь будет понимать что кнопка активна и после нажатия что-то произойдёт.
Focus (фокус)
Такое состояние используется при навигации с клавиатуры. В этом состоянии кнопка должна изменить свой вид, чтобы пользователь понимал, что именно она находится в фокусе. Самый распространённый приём — добавить пунктирную обводку к дефолтному состоянию.
Aactive (нажатие)
Кнопка переходит в состояние Active, когда пользователь нажал на нее. Это может происходить и при клике мышью, и при нажатии на кнопку на сенсорном экране. В этом состоянии кнопка меняет свой вид на долю секунды, сообщая что действие совершено.
Loading (состояние загрузки)
В этом состоянии кнопка может иметь анимацию или другой вид, чтобы пользователь понимал, что информация загружается и нужно подождать некоторое время.
Состояние ожидания является важным элементом интерфейса, так как оно позволяет пользователям понимать, что приложение находится в процессе выполнения некоторой задачи и не зависло. Это также уменьшает вероятность того, что пользователи повторно нажмут на кнопку, что может привести к ошибкам и зависаниям.
Disabled (неактивная)
Кнопка может быть отключена, если нажатие на нее недоступно или не имеет смысла в текущем контексте. Например, пока форма не заполнена, кнопка будет неактивна. Такая кнопка может иметь серый цвет или другой блеклый вид, который будет указывать на ее недоступность.
Супер, если статья вам понравилась! А если ещё и помогла — ставьте👍🏼