Overview for button
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 |
Theming
Buttons can be colored in terms of the current theme using the color
property to set the
background color to primary
, accent
, or warn
.
Capitalization
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.
Extended fab buttons
Traditional fab buttons are circular and only have space for a single icon. However, you can add the
extended
attribute to allow the fab to expand into a rounded rectangle shape with space for a text
label in addition to the icon. Only full sized fabs support the extended
attribute, mini fabs do
not.
<button mat-fab extended>
<mat-icon>home</mat-icon>
Home
</button>
Accessibility
Angular Material uses native <button>
and <a>
elements to ensure an accessible experience by
default. A <button>
element should be used for any interaction that performs an action on the
current page. An <a>
element should be used for any interaction that navigates to another
URL. All standard accessibility best practices for buttons and anchors apply to MatButton
.
Disabling anchors
MatAnchor
supports disabling an anchor in addition to the features provided by the native
<a>
element. When you disable an anchor, the component sets aria-disabled="true"
and
tabindex="-1"
. Always test disabled anchors in your application to ensure compatibility
with any assistive technology your application supports.
Buttons with icons
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
. See the documentation
for MatIcon
for more
information on using icons in buttons.
Toggle buttons
See the documentation for MatButtonToggle
for information on stateful toggle buttons.