Flat button with inverted colors (accent color background)

[Ploppy3]

Bug, feature request, or proposal:

Feature request:
A flat button with accent background and its corresponding text color.

What are the steps to reproduce?

Basically it's a raised button without its shadow.

What is the use-case or motivation for changing an existing behavior?

Those buttons are used in many situations since you are not supposed to use the raised button on elements with z-elevation.
They are already present in many (if not all) Google apps and websites with material design.
Even though they are not described in the official guidelines, the image you see is taken from the material guidelines website on the 'button' page.

[jelbourn]

I don't follow. How is this not the existing color property?

[Ploppy3]

Currently we have this:

I request a raised button without its shadow as stated in the feature request.

[Ploppy3]

One way to implement it: add a new directive [background-color] to the md-button.
What do you think?

[willshowell]

While not idiomatic, it might be nice if adjusting the elevation of the raised button was a little easier. This,

<button mat-raised-button class="mat-elevation-z0">BUTTON</button>

doesn't work because both the default elevation and z0 styles have the same specificity. Of course it's simple to add this to your global stylesheet.

.my-flat-button.mat-raised-button {
  box-shadow: none;
}

[Ploppy3]

@crisbeto Thank you very much.

[leocaseiro]

That would be nice if we could also overwrite mat-button-toggle-group. Should I open a new issue or is very related to this one?

cc @crisbeto

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}