API reference for Angular Material button

import {MatButtonModule} from '@angular/material/button';

Material Design button component. Users interact with a button to perform an action. See https://material.io/components/buttons

The MatButton class applies to native button elements and captures the appearances for "text button", "outlined button", and "contained button" per the Material Design specification. MatButton additionally captures an additional "flat" appearance, which matches "contained" but without elevation.

Selector: button[mat-button] button[mat-raised-button] button[mat-flat-button] button[mat-stroked-button]

Exported as: matButton
Properties
Name Description
@Input({ transform: booleanAttribute, alias: 'aria-disabled' })

ariaDisabled: boolean | undefined

aria-disabled value of the button.
@Input()

color: string | null

Theme color palette of the button
@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether the ripple effect is disabled or not.
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the button is disabled.
@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Natively disabled buttons prevent focus and any pointer events from reaching the button. In some scenarios this might not be desirable, because it can prevent users from finding out why the button is disabled (e.g. via tooltip).

Enabling this input will change the button so that it is styled to be disabled and will be marked as aria-disabled, but it will allow the button to receive events and focus.

Note that by enabling this, you need to set the tabindex yourself if the button isn't meant to be tabbable and you have to prevent the button action (e.g. form submissions).
Deprecated

ripple: MatRipple

Reference to the MatRipple instance of the button.
Methods
focus

Focuses the button.
Parameters

origin

FocusOrigin = 'program'

options?

FocusOptions

Material Design button component for anchor elements. Anchor elements are used to provide links for the user to navigate across different routes or pages. See https://material.io/components/buttons

The MatAnchor class applies to native anchor elements and captures the appearances for "text button", "outlined button", and "contained button" per the Material Design specification. MatAnchor additionally captures an additional "flat" appearance, which matches "contained" but without elevation.

Selector: a[mat-button] a[mat-raised-button] a[mat-flat-button] a[mat-stroked-button]

Exported as: matButton, matAnchor
Properties
Name Description
@Input({ transform: booleanAttribute, alias: 'aria-disabled' })

ariaDisabled: boolean | undefined

aria-disabled value of the button.
@Input()

color: string | null

Theme color palette of the button
@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether the ripple effect is disabled or not.
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the button is disabled.
@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Natively disabled buttons prevent focus and any pointer events from reaching the button. In some scenarios this might not be desirable, because it can prevent users from finding out why the button is disabled (e.g. via tooltip).

Enabling this input will change the button so that it is styled to be disabled and will be marked as aria-disabled, but it will allow the button to receive events and focus.

Note that by enabling this, you need to set the tabindex yourself if the button isn't meant to be tabbable and you have to prevent the button action (e.g. form submissions).
Deprecated

ripple: MatRipple

Reference to the MatRipple instance of the button.
Methods
focus

Focuses the button.
Parameters

origin

FocusOrigin = 'program'

options?

FocusOptions

Material Design floating action button (FAB) component. These buttons represent the primary or most common action for users to interact with. See https://material.io/components/buttons-floating-action-button/

The MatFabButton class has two appearances: normal and extended.

Selector: button[mat-fab]

Exported as: matButton
Properties
Name Description
@Input({ transform: booleanAttribute, alias: 'aria-disabled' })

ariaDisabled: boolean | undefined

aria-disabled value of the button.
@Input()

color: string | null

Theme color palette of the button
@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether the ripple effect is disabled or not.
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the button is disabled.
@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Natively disabled buttons prevent focus and any pointer events from reaching the button. In some scenarios this might not be desirable, because it can prevent users from finding out why the button is disabled (e.g. via tooltip).

Enabling this input will change the button so that it is styled to be disabled and will be marked as aria-disabled, but it will allow the button to receive events and focus.

Note that by enabling this, you need to set the tabindex yourself if the button isn't meant to be tabbable and you have to prevent the button action (e.g. form submissions).
@Input({ transform: booleanAttribute })

extended: boolean

Deprecated

ripple: MatRipple

Reference to the MatRipple instance of the button.
Methods
focus

Focuses the button.
Parameters

origin

FocusOrigin = 'program'

options?

FocusOptions

Material Design mini floating action button (FAB) component. These buttons represent the primary or most common action for users to interact with. See https://material.io/components/buttons-floating-action-button/

Selector: button[mat-mini-fab]

Exported as: matButton
Properties
Name Description
@Input({ transform: booleanAttribute, alias: 'aria-disabled' })

ariaDisabled: boolean | undefined

aria-disabled value of the button.
@Input()

color: string | null

Theme color palette of the button
@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether the ripple effect is disabled or not.
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the button is disabled.
@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Natively disabled buttons prevent focus and any pointer events from reaching the button. In some scenarios this might not be desirable, because it can prevent users from finding out why the button is disabled (e.g. via tooltip).

Enabling this input will change the button so that it is styled to be disabled and will be marked as aria-disabled, but it will allow the button to receive events and focus.

Note that by enabling this, you need to set the tabindex yourself if the button isn't meant to be tabbable and you have to prevent the button action (e.g. form submissions).
Deprecated

ripple: MatRipple

Reference to the MatRipple instance of the button.
Methods
focus

Focuses the button.
Parameters

origin

FocusOrigin = 'program'

options?

FocusOptions

Material Design floating action button (FAB) component for anchor elements. Anchor elements are used to provide links for the user to navigate across different routes or pages. See https://material.io/components/buttons-floating-action-button/

The MatFabAnchor class has two appearances: normal and extended.

Selector: a[mat-fab]

Exported as: matButton, matAnchor
Properties
Name Description
@Input({ transform: booleanAttribute, alias: 'aria-disabled' })

ariaDisabled: boolean | undefined

aria-disabled value of the button.
@Input()

color: string | null

Theme color palette of the button
@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether the ripple effect is disabled or not.
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the button is disabled.
@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Natively disabled buttons prevent focus and any pointer events from reaching the button. In some scenarios this might not be desirable, because it can prevent users from finding out why the button is disabled (e.g. via tooltip).

Enabling this input will change the button so that it is styled to be disabled and will be marked as aria-disabled, but it will allow the button to receive events and focus.

Note that by enabling this, you need to set the tabindex yourself if the button isn't meant to be tabbable and you have to prevent the button action (e.g. form submissions).
@Input({ transform: booleanAttribute })

extended: boolean

Deprecated

ripple: MatRipple

Reference to the MatRipple instance of the button.
Methods
focus

Focuses the button.
Parameters

origin

FocusOrigin = 'program'

options?

FocusOptions

Material Design mini floating action button (FAB) component for anchor elements. Anchor elements are used to provide links for the user to navigate across different routes or pages. See https://material.io/components/buttons-floating-action-button/

Selector: a[mat-mini-fab]

Exported as: matButton, matAnchor
Properties
Name Description
@Input({ transform: booleanAttribute, alias: 'aria-disabled' })

ariaDisabled: boolean | undefined

aria-disabled value of the button.
@Input()

color: string | null

Theme color palette of the button
@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether the ripple effect is disabled or not.
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the button is disabled.
@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Natively disabled buttons prevent focus and any pointer events from reaching the button. In some scenarios this might not be desirable, because it can prevent users from finding out why the button is disabled (e.g. via tooltip).

Enabling this input will change the button so that it is styled to be disabled and will be marked as aria-disabled, but it will allow the button to receive events and focus.

Note that by enabling this, you need to set the tabindex yourself if the button isn't meant to be tabbable and you have to prevent the button action (e.g. form submissions).
Deprecated

ripple: MatRipple

Reference to the MatRipple instance of the button.
Methods
focus

Focuses the button.
Parameters

origin

FocusOrigin = 'program'

options?

FocusOptions

Material Design icon button component. This type of button displays a single interactive icon for users to perform an action. See https://material.io/develop/web/components/buttons/icon-buttons/

Selector: button[mat-icon-button]

Exported as: matButton
Properties
Name Description
@Input({ transform: booleanAttribute, alias: 'aria-disabled' })

ariaDisabled: boolean | undefined

aria-disabled value of the button.
@Input()

color: string | null

Theme color palette of the button
@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether the ripple effect is disabled or not.
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the button is disabled.
@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Natively disabled buttons prevent focus and any pointer events from reaching the button. In some scenarios this might not be desirable, because it can prevent users from finding out why the button is disabled (e.g. via tooltip).

Enabling this input will change the button so that it is styled to be disabled and will be marked as aria-disabled, but it will allow the button to receive events and focus.

Note that by enabling this, you need to set the tabindex yourself if the button isn't meant to be tabbable and you have to prevent the button action (e.g. form submissions).
Deprecated

ripple: MatRipple

Reference to the MatRipple instance of the button.
Methods
focus

Focuses the button.
Parameters

origin

FocusOrigin = 'program'

options?

FocusOptions

Material Design icon button component for anchor elements. This button displays a single interaction icon that allows users to navigate across different routes or pages. See https://material.io/develop/web/components/buttons/icon-buttons/

Selector: a[mat-icon-button]

Exported as: matButton, matAnchor
Properties
Name Description
@Input({ transform: booleanAttribute, alias: 'aria-disabled' })

ariaDisabled: boolean | undefined

aria-disabled value of the button.
@Input()

color: string | null

Theme color palette of the button
@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether the ripple effect is disabled or not.
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the button is disabled.
@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Natively disabled buttons prevent focus and any pointer events from reaching the button. In some scenarios this might not be desirable, because it can prevent users from finding out why the button is disabled (e.g. via tooltip).

Enabling this input will change the button so that it is styled to be disabled and will be marked as aria-disabled, but it will allow the button to receive events and focus.

Note that by enabling this, you need to set the tabindex yourself if the button isn't meant to be tabbable and you have to prevent the button action (e.g. form submissions).
Deprecated

ripple: MatRipple

Reference to the MatRipple instance of the button.
Methods
focus

Focuses the button.
Parameters

origin

FocusOrigin = 'program'

options?

FocusOptions

Object that can be used to configure the default options for the button component.

Properties
Name Description

disabledInteractive: boolean

Whether disabled buttons should be interactive.

Default FAB options that can be overridden.

Properties
Name Description

color: ThemePalette

Injection token that can be used to provide the default options the button component.

const MAT_BUTTON_CONFIG: InjectionToken<MatButtonConfig>;

Injection token to be used to override the default options for FAB.

const MAT_FAB_DEFAULT_OPTIONS: InjectionToken<MatFabDefaultOptions>;