Button • Angular Material

Styles from the material/button package can be customized using the fab-overrides, icon-button-overrides and 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.fab-overrides((
    container-color: orange,
    container-elevation-shadow: -4px -4px 5px 0px rgba(0, 0, 0, 0.5),
  ));
}

You can find the full list of supported mixins and tokens below.

Tokens supported by `fab-overrides`

Filter by name

Filter by type

Filter by default value

Name	Type	Default value
`container-shape`	Base	--mat-sys-corner-large
`extended-container-height`	Base	56px
`extended-container-shape`	Base	--mat-sys-corner-large
`small-container-shape`	Base	--mat-sys-corner-medium
`touch-target-display`	Base
`touch-target-size`	Base	48px
`small-touch-target-size`	Base	48px
`container-color`	Color	--mat-sys-primary-container
`container-elevation-shadow`	Color	--mat-sys-level3
`disabled-state-container-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent)
`disabled-state-foreground-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`extended-container-elevation-shadow`	Color	--mat-sys-level3
`extended-focus-container-elevation-shadow`	Color	--mat-sys-level3
`extended-hover-container-elevation-shadow`	Color	--mat-sys-level4
`extended-pressed-container-elevation-shadow`	Color	--mat-sys-level3
`focus-container-elevation-shadow`	Color	--mat-sys-level3
`focus-state-layer-opacity`	Color	--mat-sys-focus-state-layer-opacity
`foreground-color`	Color	--mat-sys-on-primary-container
`hover-container-elevation-shadow`	Color	--mat-sys-level4
`hover-state-layer-opacity`	Color	--mat-sys-hover-state-layer-opacity
`pressed-container-elevation-shadow`	Color	--mat-sys-level3
`pressed-state-layer-opacity`	Color	--mat-sys-pressed-state-layer-opacity
`ripple-color`	Color	color-mix(in srgb, var(--mat-sys-on-primary-container) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)
`small-container-color`	Color	--mat-sys-primary-container
`small-container-elevation-shadow`	Color	--mat-sys-level3
`small-disabled-state-container-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent)
`small-disabled-state-foreground-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`small-focus-container-elevation-shadow`	Color	--mat-sys-level3
`small-focus-state-layer-opacity`	Color	--mat-sys-focus-state-layer-opacity
`small-foreground-color`	Color	--mat-sys-on-primary-container
`small-hover-container-elevation-shadow`	Color	--mat-sys-level4
`small-hover-state-layer-opacity`	Color	--mat-sys-hover-state-layer-opacity
`small-pressed-container-elevation-shadow`	Color	--mat-sys-level3
`small-pressed-state-layer-opacity`	Color	--mat-sys-pressed-state-layer-opacity
`small-ripple-color`	Color	color-mix(in srgb, var(--mat-sys-on-primary-container) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)
`small-state-layer-color`	Color	--mat-sys-on-primary-container
`state-layer-color`	Color	--mat-sys-on-primary-container
`disabled-state-layer-color`	Color
`small-disabled-state-layer-color`	Color
`extended-label-text-font`	Typography	--mat-sys-label-large-font
`extended-label-text-size`	Typography	--mat-sys-label-large-size
`extended-label-text-tracking`	Typography	--mat-sys-label-large-tracking
`extended-label-text-weight`	Typography	--mat-sys-label-large-weight
`small-touch-target-display`	Density
`touch-target-display`	Density	block

Tokens supported by `icon-button-overrides`

Filter by name

Filter by type

Filter by default value

Name	Type	Default value
`icon-size`	Base	24px
`container-shape`	Base	--mat-sys-corner-full
`touch-target-size`	Base	48px
`disabled-icon-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`disabled-state-layer-color`	Color	--mat-sys-on-surface-variant
`focus-state-layer-opacity`	Color	--mat-sys-focus-state-layer-opacity
`hover-state-layer-opacity`	Color	--mat-sys-hover-state-layer-opacity
`icon-color`	Color	--mat-sys-on-surface-variant
`pressed-state-layer-opacity`	Color	--mat-sys-pressed-state-layer-opacity
`ripple-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface-variant) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)
`state-layer-color`	Color	--mat-sys-on-surface-variant
`touch-target-display`	Density	block
`state-layer-size`	Density	40px

Tokens supported by `button-overrides`

Filter by name

Filter by type

Filter by default value

Name	Type	Default value
`filled-container-shape`	Base	--mat-sys-corner-full
`filled-horizontal-padding`	Base	24px
`filled-icon-offset`	Base	-8px
`filled-icon-spacing`	Base	8px
`filled-label-text-transform`	Base
`filled-touch-target-size`	Base	48px
`outlined-container-shape`	Base	--mat-sys-corner-full
`outlined-horizontal-padding`	Base	24px
`outlined-icon-offset`	Base	-8px
`outlined-icon-spacing`	Base	8px
`outlined-outline-width`	Base	1px
`outlined-label-text-transform`	Base
`outlined-touch-target-size`	Base	48px
`protected-container-shape`	Base	--mat-sys-corner-full
`protected-horizontal-padding`	Base	24px
`protected-icon-offset`	Base	-8px
`protected-icon-spacing`	Base	8px
`protected-label-text-transform`	Base
`protected-touch-target-size`	Base	48px
`text-container-shape`	Base	--mat-sys-corner-full
`text-horizontal-padding`	Base	12px
`text-icon-offset`	Base	-4px
`text-icon-spacing`	Base	8px
`text-with-icon-horizontal-padding`	Base	16px
`text-label-text-transform`	Base
`text-touch-target-size`	Base	48px
`tonal-container-shape`	Base	--mat-sys-corner-full
`tonal-horizontal-padding`	Base	24px
`tonal-icon-offset`	Base	-8px
`tonal-icon-spacing`	Base	8px
`tonal-label-text-transform`	Base
`tonal-touch-target-size`	Base	48px
`filled-container-color`	Color	--mat-sys-primary
`filled-disabled-container-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent)
`filled-disabled-label-text-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`filled-disabled-state-layer-color`	Color	--mat-sys-on-surface-variant
`filled-focus-state-layer-opacity`	Color	--mat-sys-focus-state-layer-opacity
`filled-hover-state-layer-opacity`	Color	--mat-sys-hover-state-layer-opacity
`filled-label-text-color`	Color	--mat-sys-on-primary
`filled-pressed-state-layer-opacity`	Color	--mat-sys-pressed-state-layer-opacity
`filled-ripple-color`	Color	color-mix(in srgb, var(--mat-sys-on-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)
`filled-progress-active-indicator-color`	Color	--mat-sys-on-primary
`filled-state-layer-color`	Color	--mat-sys-on-primary
`outlined-disabled-label-text-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`outlined-disabled-outline-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent)
`outlined-disabled-state-layer-color`	Color	--mat-sys-on-surface-variant
`outlined-focus-state-layer-opacity`	Color	--mat-sys-focus-state-layer-opacity
`outlined-hover-state-layer-opacity`	Color	--mat-sys-hover-state-layer-opacity
`outlined-label-text-color`	Color	--mat-sys-primary
`outlined-outline-color`	Color	--mat-sys-outline
`outlined-pressed-state-layer-opacity`	Color	--mat-sys-pressed-state-layer-opacity
`outlined-ripple-color`	Color	color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)
`outlined-state-layer-color`	Color	--mat-sys-primary
`protected-container-color`	Color	--mat-sys-surface
`protected-container-elevation-shadow`	Color	--mat-sys-level1
`protected-disabled-container-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent)
`protected-disabled-container-elevation-shadow`	Color	--mat-sys-level0
`protected-disabled-label-text-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`protected-disabled-state-layer-color`	Color	--mat-sys-on-surface-variant
`protected-focus-container-elevation-shadow`	Color	--mat-sys-level1
`protected-focus-state-layer-opacity`	Color	--mat-sys-focus-state-layer-opacity
`protected-hover-container-elevation-shadow`	Color	--mat-sys-level2
`protected-hover-state-layer-opacity`	Color	--mat-sys-hover-state-layer-opacity
`protected-label-text-color`	Color	--mat-sys-primary
`protected-pressed-container-elevation-shadow`	Color	--mat-sys-level1
`protected-pressed-state-layer-opacity`	Color	--mat-sys-pressed-state-layer-opacity
`protected-ripple-color`	Color	color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)
`protected-state-layer-color`	Color	--mat-sys-primary
`text-disabled-label-text-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`text-disabled-state-layer-color`	Color	--mat-sys-on-surface-variant
`text-focus-state-layer-opacity`	Color	--mat-sys-focus-state-layer-opacity
`text-hover-state-layer-opacity`	Color	--mat-sys-hover-state-layer-opacity
`text-label-text-color`	Color	--mat-sys-primary
`text-pressed-state-layer-opacity`	Color	--mat-sys-pressed-state-layer-opacity
`text-ripple-color`	Color	color-mix(in srgb, var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)
`text-state-layer-color`	Color	--mat-sys-primary
`tonal-container-color`	Color	--mat-sys-secondary-container
`tonal-disabled-container-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent)
`tonal-disabled-label-text-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`tonal-disabled-state-layer-color`	Color	--mat-sys-on-surface-variant
`tonal-focus-state-layer-opacity`	Color	--mat-sys-focus-state-layer-opacity
`tonal-hover-state-layer-opacity`	Color	--mat-sys-hover-state-layer-opacity
`tonal-label-text-color`	Color	--mat-sys-on-secondary-container
`tonal-pressed-state-layer-opacity`	Color	--mat-sys-pressed-state-layer-opacity
`tonal-ripple-color`	Color	color-mix(in srgb, var(--mat-sys-on-secondary-container) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent)
`tonal-state-layer-color`	Color	--mat-sys-on-secondary-container
`filled-label-text-font`	Typography	--mat-sys-label-large-font
`filled-label-text-size`	Typography	--mat-sys-label-large-size
`filled-label-text-tracking`	Typography	--mat-sys-label-large-tracking
`filled-label-text-weight`	Typography	--mat-sys-label-large-weight
`outlined-label-text-font`	Typography	--mat-sys-label-large-font
`outlined-label-text-size`	Typography	--mat-sys-label-large-size
`outlined-label-text-tracking`	Typography	--mat-sys-label-large-tracking
`outlined-label-text-weight`	Typography	--mat-sys-label-large-weight
`protected-label-text-font`	Typography	--mat-sys-label-large-font
`protected-label-text-size`	Typography	--mat-sys-label-large-size
`protected-label-text-tracking`	Typography	--mat-sys-label-large-tracking
`protected-label-text-weight`	Typography	--mat-sys-label-large-weight
`text-label-text-font`	Typography	--mat-sys-label-large-font
`text-label-text-size`	Typography	--mat-sys-label-large-size
`text-label-text-tracking`	Typography	--mat-sys-label-large-tracking
`text-label-text-weight`	Typography	--mat-sys-label-large-weight
`tonal-label-text-font`	Typography	--mat-sys-label-large-font
`tonal-label-text-size`	Typography	--mat-sys-label-large-size
`tonal-label-text-tracking`	Typography	--mat-sys-label-large-tracking
`tonal-label-text-weight`	Typography	--mat-sys-label-large-weight
`filled-touch-target-display`	Density	block
`filled-container-height`	Density	40px
`outlined-container-height`	Density	40px
`outlined-touch-target-display`	Density	block
`protected-touch-target-display`	Density	block
`protected-container-height`	Density	40px
`text-touch-target-display`	Density	block
`text-container-height`	Density	40px
`tonal-container-height`	Density	40px
`tonal-touch-target-display`	Density	block

How to style button

Tokens supported by fab-overrides

Tokens supported by icon-button-overrides

Tokens supported by button-overrides

Tokens supported by `fab-overrides`

Tokens supported by `icon-button-overrides`

Tokens supported by `button-overrides`