bug(buttons): align button types with m3 specs

[Mikastark]

trafficstars

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hi Angular Material Team ! Thanks for all your hard work on this project. Today I want to pointout the Material 3 specification for buttons mention 5 differents kind of buttons :

• Elevated : currently named raised but wrong background color is applied (should be surface-container-low)
• Filled : currently named flat
• Filled tonal : not supported
• Outlined : currently named flat
• Text : not supported

I understand this is a very small and easy-to-workaround issue but it would be nice to have a better alignement with Material 3 specs and prevent developers to add extra (yet tiny) style code to get the expected appearance.

Futhermore, a appreciable enhancement whould be to regroup all css selectors for MatButton and MatAnchor directives into one mat-button and add an extra appearance input like cards does. Acceptable values would be elevated, filled, filled-tonal, outlined and text (default one)

Reproduction

If really needed, tell me...

Expected Behavior

• Rename mat-raised-button to mat-elevated-button
• Rename mat-flat-button to mat-filled-button
• Add missing mat-filled-tonal-button
• Rename mat-flat-button to mat-outlined-button
• Add missing mat-text-button

Actual Behavior

cf. Expected Behavior

Environment

• Angular: 18.2.7
• CDK/Material: 18.2.7
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 24.04