0

The following is said here in relation to Material Design buttons:

1. Text button (low emphasis) - Text buttons are typically used for less important actions.

2. Outlined Button (medium emphasis) - Outlined buttons are used for more emphasis than text buttons due to the stroke.

3. Contained button (high emphasis) - Contained buttons have more emphasis, as they use a color fill and shadow.

enter image description here

We see that there are 3 different styles of buttons, each with different levels of emphasis.

It is then said here that "the baseline color for contained, text and outlined buttons is your primary color".

Here we see the following:

enter image description here

I am confused about the fact that a contained button is shown here with a transparent background. Where is this fourth possibility defined? It seems to have an emphasis between "medium" and "high". It is as if this button is using the secondary color and the secondary color happens to be white? I can't find any information about it, but it is used in example images a few times. Also, we see all four of these types of buttons used in most if not all of Google's modern UI... And I expect this isn't a "material theming" thing because from what I know there's only supposed to be 3 button types used in your app. Can anyone clarify this for me?

1
  • David, your question is about Google's material design guidelines, not UX specifically, so I have to close it. If you find a way of asking the question in a general way, it can be reopened. – JohnGB Apr 25 '20 at 10:00
2

It's subtle enough to be confusing, but the button in the "Don't" example has elevation, so it's a Contained button with a white background vs. an Outlined button.

A Contained purple button next to a transparent non-elevated Outlined button is allowed.

Contained button next to outlined button example

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