Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(buttons): align button types with m3 specs #29841

Closed
1 task
MikaStark opened this issue Oct 7, 2024 · 0 comments · Fixed by #30626
Closed
1 task

bug(buttons): align button types with m3 specs #29841

MikaStark opened this issue Oct 7, 2024 · 0 comments · Fixed by #30626
Assignees
@crisbeto
Labels
area: material/button P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@MikaStark
Copy link

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
@MikaStark MikaStark added the needs triage This issue needs to be triaged by the team label Oct 7, 2024
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: material/button and removed needs triage This issue needs to be triaged by the team labels Oct 9, 2024
@crisbeto crisbeto self-assigned this Mar 13, 2025
@crisbeto crisbeto mentioned this issue Mar 13, 2025
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 13, 2025
@crisbeto
feat(material/button): allow appearance to be set dynamically
f757c2f 
Adds the following features to the button:
* Allows the appearance of a button to be set dynamically using the `matButton` input.
* Aligns the terminology with the M3 spec. Currently the names are derived from an old spec.
* Adds the ability to set the default appearance for buttons.
* Adds a `matIconButton` selector to the icon button for consistency.
* Adds a `matFab` selector to the FAB for consistency.
* Adds a `matMiniFab` selector to the mini FAB for consistency.

All of these changes are backwards-compatible and allow us to evolve the button in the future.

Fixes angular#15367.
Fixes angular#29841.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@crisbeto crisbeto

Labels
area: material/button P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(material/button): allow appearance to be set dynamically crisbeto/material2
2 participants
@crisbeto @MikaStark