How to indicate a default button in Material Design

Question

I'm creating a Windows desktop application with Material Design (using Material Design in XAML Toolkit), and I'm wondering how to indicate that a specific button is the default button (i.e. will be triggered if Enter is pressed anywhere in the form).

In normal Windows applications, the OK button is visibly highlighted to indicate this (see the top row in the following image from this question), but I can't find any mention in the Material Design guidelines (Dialogs), Buttons) of how the default button should be indicated (nor does the toolkit I'm using highlight default buttons in any way).

Answer 1

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:

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).

Answer 2

It's not in the documentation you linked, but a relatively common solution (apart from using color) is to use solid vs ghost buttons.

Answer 3

It's in the guidelines as an image under "Specs":

You can also use the Material Component documentation for developers to see how it's implemented on other platforms and to and view a demo.

EDIT: Rereading your question, I have a better understanding of what you were going for. There isn't a specified standard for default buttons as separate from focused buttons, and I'd suggest you either:

a) use the "focused" state. For all intents and purposes, it's as if the button was focused, as it can be interacted with with a keyboard. Yes, two UI elements might be focused at a time—that isn't a problem, as both can be interacted with with the keyboard. Keep in mind that, if your form contains e.g. checkboxes or radio buttons, a default button could get in the way—sometimes enter would submit, sometimes it wouldn't...

b) don't differentiate a default button—use standard button appearance. "Enter" is generally used for submitting something, whether it be in a search field or an address bar or in a simple form. It's a common pattern that's relatively well-known. If you're not using "Enter" for submission, then I ask you to reconsider, as tying e.g. "Cancel" to the enter key would be grossly counter-intuitive.

Either way, neither of these might be immediately understood by users (you can test it and see). If you want a clear indication of what "Enter" will do, you can always add a text label like "Press enter to submit".

Answer 4

See how the subscribe button changes its state on tab press from the input field. The button state is changed to 'Focused' which is depicted in Tin Man's answer.

Answer 5

Great question. I think Material Design gives less attention to this aspect than the Windows styleguide does, simply because it is more oriented towards touch-based interaction.

However, there is a designated style for primary buttons:

The decision which button is the primary action should correlate with which button is triggered when you press enter most of the time, so I would suggest to use the primary button design for buttons that activate when the user presses enter. At least for HTML forms with a submit button, this is already what users experience on most websites.