Overview for button

Angular Material buttons are native <button> or <a> elements enhanced with Material Design styling and ink ripples.

Basic buttons
Basic
Link
Raised
Link
Stroked
Link
Flat
Link
Icon
FAB
Mini FAB
Extended Fab

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 and rounded corners
mat-raised-button Rectangular contained button w/ elevation and rounded corners
mat-flat-button Rectangular contained button w/ no elevation and rounded corners
mat-stroked-button Rectangular outlined button w/ no elevation and rounded corners
mat-icon-button Circular button with a transparent background, meant to contain an icon
mat-fab Square button w/ elevation and rounded corners, meant to contain an icon. Can be extended to a rectangle to also fit a label
mat-mini-fab Same as mat-fab but smaller

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>

Native disabled <button> elements cannot receive focus and do not dispatch any events. This can be problematic in some cases because it can prevent the app from telling the user why the button is disabled. You can use the disabledInteractive input to style the button as disabled but allow for it to receive focus and dispatch events. The button will have aria-disabled="true" for assistive technology. The behavior can be configured globally through the MAT_BUTTON_CONFIG injection token.

Note: Using the disabledInteractive input can result in buttons that previously prevented actions to no longer do so, for example a submit button in a form. When using this input, you should guard against such cases in your component.

Interactive disabled buttons

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.

Using ALL CAPS in the button text itself causes issues for screen-readers, which will read the text character-by-character. It can also cause issues for localization. We recommend not changing the default capitalization for the button text.

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 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. Additionally, to be fully accessible the icon should have a minimum touch-target of 48x48 to ensure that the icon is easily clickable particularly on mobile devices and small screens.

See the documentation for MatButtonToggle for information on stateful toggle buttons.

Azure & Blue theme selected.