Angular Material buttons are native <button> or <a> elements enhanced with Material Design
styling and ink ripples.
Native <button> and <a> elements are always used in order to provide the most straightforward
and accessible experience for users. A <button> element should be used whenever some action
is performed. An <a> element should be used whenever the user will navigate to another view.
There are several button variants, each applied as an attribute:
| Attribute | Description |
|---|---|
mat-button |
Rectangular text button w/ no elevation |
mat-raised-button |
Rectangular contained button w/ elevation |
mat-flat-button |
Rectangular contained button w/ no elevation |
mat-stroked-button |
Rectangular outlined button w/ no elevation |
mat-icon-button |
Circular button with a transparent background, meant to contain an icon |
mat-fab |
Circular button w/ elevation, defaults to theme's accent color |
mat-mini-fab |
Same as mat-fab but smaller |
Buttons can be colored in terms of the current theme using the color property to set the
background color to primary, accent, or warn.
According to the Material design spec button text has to be capitalized, however we have opted not
to capitalize buttons automatically via text-transform: uppercase, because it can cause issues in
certain locales. It is also worth noting that using ALL CAPS in the text itself causes issues for
screen-readers, which will read the text character-by-character. We leave the decision of how to
approach this to the consuming app.
Angular Material uses native <button> and <a> elements to ensure an accessible experience by
default. The <button> element should be used for any interaction that performs an action on the
current page. The <a> element should be used for any interaction that navigates to another
view.
Buttons or links containing only icons (such as mat-fab, mat-mini-fab, and mat-icon-button)
should be given a meaningful label via aria-label or aria-labelledby.