API reference for Angular Material button
import {MatButtonModule} from '@angular/material/button';
Directives
MatButton
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: matButtonProperties
Name | Description |
---|---|
|
Theme color palette for the component. |
|
Default color to fall back to if no value is set. |
|
Whether ripples are disabled. |
|
Whether the component is disabled. |
|
Reference to the MatRipple instance of the button. |
Methods
focus | |
---|---|
Focuses the button. |
|
Parameters | |
_origin FocusOrigin = 'program'
|
|
options? FocusOptions
|
|
MatAnchor
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, matAnchorProperties
Name | Description |
---|---|
|
Theme color palette for the component. |
|
Default color to fall back to if no value is set. |
|
Whether ripples are disabled. |
|
Whether the component is disabled. |
|
Reference to the MatRipple instance of the button. |
Methods
focus | |
---|---|
Focuses the button. |
|
Parameters | |
_origin FocusOrigin = 'program'
|
|
options? FocusOptions
|
|
MatFabButton
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: matButtonProperties
Name | Description |
---|---|
|
Theme color palette for the component. |
|
Default color to fall back to if no value is set. |
|
Whether ripples are disabled. |
|
Whether the component is disabled. |
|
|
|
Reference to the MatRipple instance of the button. |
Methods
focus | |
---|---|
Focuses the button. |
|
Parameters | |
_origin FocusOrigin = 'program'
|
|
options? FocusOptions
|
|
MatMiniFabButton
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: matButtonProperties
Name | Description |
---|---|
|
Theme color palette for the component. |
|
Default color to fall back to if no value is set. |
|
Whether ripples are disabled. |
|
Whether the component is disabled. |
|
Reference to the MatRipple instance of the button. |
Methods
focus | |
---|---|
Focuses the button. |
|
Parameters | |
_origin FocusOrigin = 'program'
|
|
options? FocusOptions
|
|
MatFabAnchor
extends
MatAnchor
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, matAnchorProperties
Name | Description |
---|---|
|
Theme color palette for the component. |
|
Default color to fall back to if no value is set. |
|
Whether ripples are disabled. |
|
Whether the component is disabled. |
|
|
|
Reference to the MatRipple instance of the button. |
Methods
focus | |
---|---|
Focuses the button. |
|
Parameters | |
_origin FocusOrigin = 'program'
|
|
options? FocusOptions
|
|
MatMiniFabAnchor
extends
MatAnchor
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, matAnchorProperties
Name | Description |
---|---|
|
Theme color palette for the component. |
|
Default color to fall back to if no value is set. |
|
Whether ripples are disabled. |
|
Whether the component is disabled. |
|
Reference to the MatRipple instance of the button. |
Methods
focus | |
---|---|
Focuses the button. |
|
Parameters | |
_origin FocusOrigin = 'program'
|
|
options? FocusOptions
|
|
MatIconButton
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: matButtonProperties
Name | Description |
---|---|
|
Theme color palette for the component. |
|
Default color to fall back to if no value is set. |
|
Whether ripples are disabled. |
|
Whether the component is disabled. |
|
Reference to the MatRipple instance of the button. |
Methods
focus | |
---|---|
Focuses the button. |
|
Parameters | |
_origin FocusOrigin = 'program'
|
|
options? FocusOptions
|
|
MatIconAnchor
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, matAnchorProperties
Name | Description |
---|---|
|
Theme color palette for the component. |
|
Default color to fall back to if no value is set. |
|
Whether ripples are disabled. |
|
Whether the component is disabled. |
|
Reference to the MatRipple instance of the button. |
Methods
focus | |
---|---|
Focuses the button. |
|
Parameters | |
_origin FocusOrigin = 'program'
|
|
options? FocusOptions
|
|
Interfaces
MatFabDefaultOptions
Default FAB options that can be overridden.
Properties
Name | Description |
---|---|
|
Constants
MAT_FAB_DEFAULT_OPTIONS
Injection token to be used to override the default options for FAB.
const MAT_FAB_DEFAULT_OPTIONS: InjectionToken<MatFabDefaultOptions>;
API reference for Angular Material button-testing
import {MatButtonHarness} from '@angular/material/button/testing';
Classes
MatButtonHarness
extends
ContentContainerComponentHarness
Harness for interacting with a MDC-based mat-button in tests.
Properties
Name | Description |
---|---|
|
Methods
async
blur
|
|
---|---|
Blurs the button and returns a void promise that indicates when the action is complete. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
click
|
|
---|---|
Clicks the button at the given position relative to its top-left. |
|
Parameters | |
relativeX number
|
The relative x position of the click. |
relativeY number
|
The relative y position of the click. |
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
click
|
|
---|---|
Clicks the button at its center. |
|
Parameters | |
location "center"
|
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
click
|
|
---|---|
Clicks the button. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
focus
|
|
---|---|
Focuses the button and returns a void promise that indicates when the action is complete. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
async
getChildLoader
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader>
|
|
async
getHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T>
|
|
async
getHarnessOrNull
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T | null>
|
|
async
getText
|
|
---|---|
Gets a promise for the button's label text. |
|
Returns | |
Promise<string>
|
|
async
getVariant
|
|
---|---|
Gets the variant of the button. |
|
Returns | |
Promise<ButtonVariant>
|
|
async
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isDisabled
|
|
---|---|
Gets a boolean promise indicating if the button is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
isFocused
|
|
---|---|
Whether the button is focused. |
|
Returns | |
Promise<boolean>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options ButtonHarnessFilters = {}
|
Options for narrowing the search:
|
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
ButtonHarnessFilters
A set of criteria that can be used to filter a list of button harness instances.
Properties
Name | Description |
---|---|
|
Only find instances which match the given disabled state. |
|
Only find instances whose text matches the given value. |
|
Only find instances with a variant. |
Type aliases
ButtonVariant
Possible button appearances.
type ButtonVariant = 'basic' | 'raised' | 'flat' | 'icon' | 'stroked' | 'fab' | 'mini-fab';