Booklet

author

Ioana Adriana Teleanu

Design

BUTTONS! And their 5 main states.

design

Design

|

BUTTONS! And their 5 main states.

ENABLED

Also known as Default. An enabled state communicates an interactive component or element. What's important is to choose colours with appropriate contrast. Aaand, clearly make them different from text fields.

DISABLED

A disabled state communicates a noninteractive component or element. A disabled button should feel mute. Another version to make a button feel disabled it to lower its opacity.

HOVER

A hover state communicates when a user has placed a cursor above an interactive element. Of course, these state only goes on desktop and not in every instance.

FOCUSED

A focused state communicates when a user has highlighted an element, using an input method such as a keyboard or voice. Focused states are superimportant because they provide the user with the navigational feedback absolutely needed. Should be easy to spot and not rely only on colour change.

PRESSED

A pressed state communicates a user tap. Pressed states are important because they give the user the feedback to confirm their interaction with the interface and confirm their action and the fact the the element is tappable.

More booklets by Ioana Adriana Teleanu

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets