How to style button

Styles from the material/button package can be customized using the button-overrides, fab-overrides and icon-button-overrides mixins. These mixins accept a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example:
@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.button-overrides((
    filled-container-color: orange,
    filled-label-text-color: red,
  ));
}
You can find the full list of supported mixins and tokens below.

Tokens supported by button-overrides

NameTypeBased on system token
filled-container-shapeBase None
filled-container-colorColor--mat-sys-primary
filled-label-text-colorColor--mat-sys-on-primary
filled-disabled-container-colorColor--mat-sys-on-surface
filled-disabled-label-text-colorColor--mat-sys-on-surface
filled-label-text-fontTypography--mat-sys-label-large-font
filled-label-text-sizeTypography--mat-sys-label-large-size
filled-label-text-trackingTypography--mat-sys-label-large-tracking
filled-label-text-weightTypography--mat-sys-label-large-weight
filled-label-text-transformTypography None
filled-container-heightDensity None
filled-horizontal-paddingBase None
filled-icon-spacingBase None
filled-icon-offsetBase None
filled-state-layer-colorColor--mat-sys-on-primary
filled-disabled-state-layer-colorColor--mat-sys-on-surface-variant
filled-ripple-colorColor--mat-sys-on-primary
filled-hover-state-layer-opacityColor None
filled-focus-state-layer-opacityColor None
filled-pressed-state-layer-opacityColor None
filled-touch-target-displayDensity None
outlined-outline-widthBase None
outlined-container-shapeBase None
outlined-disabled-outline-colorColor--mat-sys-on-surface
outlined-disabled-label-text-colorColor--mat-sys-on-surface
outlined-label-text-colorColor--mat-sys-primary
outlined-outline-colorColor--mat-sys-outline
outlined-label-text-fontTypography--mat-sys-label-large-font
outlined-label-text-sizeTypography--mat-sys-label-large-size
outlined-label-text-trackingTypography--mat-sys-label-large-tracking
outlined-label-text-weightTypography--mat-sys-label-large-weight
outlined-label-text-transformTypography None
outlined-container-heightDensity None
outlined-horizontal-paddingBase None
outlined-icon-spacingBase None
outlined-icon-offsetBase None
outlined-state-layer-colorColor--mat-sys-primary
outlined-disabled-state-layer-colorColor--mat-sys-on-surface-variant
outlined-ripple-colorColor--mat-sys-primary
outlined-hover-state-layer-opacityColor None
outlined-focus-state-layer-opacityColor None
outlined-pressed-state-layer-opacityColor None
outlined-touch-target-displayDensity None
protected-container-shapeBase None
protected-container-elevation-shadowColor None
protected-disabled-container-elevation-shadowColor None
protected-focus-container-elevation-shadowColor None
protected-hover-container-elevation-shadowColor None
protected-pressed-container-elevation-shadowColor None
protected-container-colorColor--mat-sys-surface
protected-label-text-colorColor--mat-sys-primary
protected-disabled-container-colorColor--mat-sys-on-surface
protected-disabled-label-text-colorColor--mat-sys-on-surface
protected-label-text-fontTypography--mat-sys-label-large-font
protected-label-text-sizeTypography--mat-sys-label-large-size
protected-label-text-trackingTypography--mat-sys-label-large-tracking
protected-label-text-weightTypography--mat-sys-label-large-weight
protected-label-text-transformTypography None
protected-container-heightDensity None
protected-horizontal-paddingBase None
protected-icon-spacingBase None
protected-icon-offsetBase None
protected-state-layer-colorColor--mat-sys-primary
protected-disabled-state-layer-colorColor--mat-sys-on-surface-variant
protected-ripple-colorColor--mat-sys-primary
protected-hover-state-layer-opacityColor None
protected-focus-state-layer-opacityColor None
protected-pressed-state-layer-opacityColor None
protected-touch-target-displayDensity None
text-container-shapeBase None
text-label-text-colorColor--mat-sys-primary
text-disabled-label-text-colorColor--mat-sys-on-surface
text-label-text-fontTypography--mat-sys-label-large-font
text-label-text-sizeTypography--mat-sys-label-large-size
text-label-text-trackingTypography--mat-sys-label-large-tracking
text-label-text-weightTypography--mat-sys-label-large-weight
text-label-text-transformTypography None
text-container-heightDensity None
text-horizontal-paddingBase None
text-with-icon-horizontal-paddingBase None
text-icon-spacingBase None
text-icon-offsetBase None
text-state-layer-colorColor--mat-sys-primary
text-disabled-state-layer-colorColor--mat-sys-on-surface-variant
text-ripple-colorColor--mat-sys-primary
text-hover-state-layer-opacityColor None
text-focus-state-layer-opacityColor None
text-pressed-state-layer-opacityColor None
text-touch-target-displayDensity None

Tokens supported by fab-overrides

NameTypeBased on system token
container-shapeBase None
container-elevation-shadowColor None
focus-container-elevation-shadowColor None
hover-container-elevation-shadowColor None
pressed-container-elevation-shadowColor None
container-colorColor--mat-sys-primary-container
small-container-shapeBase None
small-container-elevation-shadowColor None
small-focus-container-elevation-shadowColor None
small-hover-container-elevation-shadowColor None
small-pressed-container-elevation-shadowColor None
small-container-colorColor--mat-sys-primary-container
extended-container-heightBase None
extended-container-shapeBase None
extended-container-elevation-shadowColor None
extended-focus-container-elevation-shadowColor None
extended-hover-container-elevation-shadowColor None
extended-pressed-container-elevation-shadowColor None
extended-label-text-fontTypography--mat-sys-label-large-font
extended-label-text-sizeTypography--mat-sys-label-large-size
extended-label-text-trackingTypography--mat-sys-label-large-tracking
extended-label-text-weightTypography--mat-sys-label-large-weight
foreground-colorColor--mat-sys-on-primary-container
state-layer-colorColor--mat-sys-on-primary-container
disabled-state-layer-colorColor None
ripple-colorColor--mat-sys-on-primary-container
hover-state-layer-opacityColor None
focus-state-layer-opacityColor None
pressed-state-layer-opacityColor None
disabled-state-container-colorColor--mat-sys-on-surface
disabled-state-foreground-colorColor--mat-sys-on-surface
touch-target-displayDensity None
small-foreground-colorColor--mat-sys-on-primary-container
small-state-layer-colorColor--mat-sys-on-primary-container
small-disabled-state-layer-colorColor None
small-ripple-colorColor--mat-sys-on-primary-container
small-hover-state-layer-opacityColor None
small-focus-state-layer-opacityColor None
small-pressed-state-layer-opacityColor None
small-disabled-state-container-colorColor--mat-sys-on-surface
small-disabled-state-foreground-colorColor--mat-sys-on-surface
small-touch-target-displayBase None

Tokens supported by icon-button-overrides

NameTypeBased on system token
icon-sizeBase None
icon-colorColor--mat-sys-on-surface-variant
disabled-icon-colorColor--mat-sys-on-surface
state-layer-sizeDensity None
state-layer-colorColor--mat-sys-on-surface-variant
disabled-state-layer-colorColor--mat-sys-on-surface-variant
ripple-colorColor--mat-sys-on-surface-variant
hover-state-layer-opacityColor None
focus-state-layer-opacityColor None
pressed-state-layer-opacityColor None
touch-target-displayDensity None
Azure & Blue theme selected.