1

I'm currently trying to determine how buttons with just icons as placeholders should be represented throughout our product.

Currently, each button is displayed as the representation on the right in this image.

enter image description here

I'm curious if they shouldn't be colored or have an active much of a hover state like a button, and more like the left side where they are gray and then have a slightly darker hover state?

Not sure what the best use-case for this is. I'm also trying to stick to material design as well.

  • 3
    If you're trying to stick to material there is a section at the bottom of the docs that cover Icon states, I'd follow that. Material Docs - Button Toggle – DasBeasto Oct 3 '16 at 14:40
  • Ah, I had looked but wasn't able to find anything, thank you for this! – Bryce Snyder Oct 3 '16 at 14:41
1

As I understand their spec for icon toggles :

Toggles Material Design

2

A good button affords usability by presenting a different visual style for each state the button is in. Some may not fully apply depending on the medium (eg hover isn't really a state on a touchscreen device).

States:

  1. Default
  2. Focused
  3. Hovered
  4. Active

Although 2,3,4 can all technically be skipped, (the button still works) the users experience is not as good.

The focus state let's a user see which element on the screen has the focus "where am I?" and let's the user press space/enter to invoke it.

The hover state helps with discoverability showing which elements are actionable, and let's the user know they are "in the hotspot".

Finally the active state lets the user know that their tap/touch/click was successful and the system registered the input. If you've ever used a system that doesn't have this state it can be annoying if the response is slow... you ask yourself did I really click that? And end up clicking it again and again.

TL;DR whenever possible, ensure your buttons render something for all the states.

Note: In addition in some cases there is an additional mode of "disabled".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.