How to indicate a default button in Material Design

There are some hints that indicate a similar behavior in Material Design that you can get as a reference for this sate.

To use some parallelism from the Windows Desktop UI, if you press the tab key you will note that the focus is moving from the current input element to the next and the visual input is the same.

The best demo I found to reproduce this in Material Design is the flat button component from Material-UI.

In their demo page, if you use the same Tab press sequence you will see that the active buttons are shown with the Material’s ripple effect.
This is the closest to the Windows desktop UI behavior and I believe that this is the language to be used in your case.

You can see this effect in the official Material Design documentation for buttons in the “Behavior” section with an animated example.

The static version will be similar to the following, a flat button and below a raised button:

enter image description here

enter image description here

If you want to draw more attention to that specific element you can use the animated version by default. But taking into consideration that you are creating a desktop app and the hover state is also needed I would keep it static and the animation only when hover (just like in the Material-UI demo).

You may Also Like:

None found

Leave a Comment