diff --git a/src/material/button/button-base.ts b/src/material/button/button-base.ts
index 59b81efb4321..0f2d3c18b24e 100644
--- a/src/material/button/button-base.ts
+++ b/src/material/button/button-base.ts
@@ -21,12 +21,15 @@ import {
OnDestroy,
OnInit,
} from '@angular/core';
-import {MatRipple, MatRippleLoader} from '@angular/material/core';
+import {MatRipple, MatRippleLoader, ThemePalette} from '@angular/material/core';
/** Object that can be used to configure the default options for the button component. */
export interface MatButtonConfig {
/** Whether disabled buttons should be interactive. */
disabledInteractive?: boolean;
+
+ /** Default palette color to apply to buttons. */
+ color?: ThemePalette;
}
/** Injection token that can be used to provide the default options the button component. */
@@ -167,6 +170,7 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
const classList = (element as HTMLElement).classList;
this.disabledInteractive = config?.disabledInteractive ?? false;
+ this.color = config?.color ?? null;
this._rippleLoader?.configureRipple(element, {className: 'mat-mdc-button-ripple'});
// For each of the variant selectors that is present in the button's host
diff --git a/src/material/button/button.spec.ts b/src/material/button/button.spec.ts
index 8e9785f68b9d..123f7b1eb4d4 100644
--- a/src/material/button/button.spec.ts
+++ b/src/material/button/button.spec.ts
@@ -3,7 +3,13 @@ import {ApplicationRef, Component, DebugElement} from '@angular/core';
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
import {MatRipple, ThemePalette} from '@angular/material/core';
import {By} from '@angular/platform-browser';
-import {MAT_FAB_DEFAULT_OPTIONS, MatButton, MatButtonModule, MatFabDefaultOptions} from './index';
+import {
+ MAT_BUTTON_CONFIG,
+ MAT_FAB_DEFAULT_OPTIONS,
+ MatButton,
+ MatButtonModule,
+ MatFabDefaultOptions,
+} from './index';
describe('MDC-based MatButton', () => {
beforeEach(waitForAsync(() => {
@@ -374,6 +380,30 @@ describe('MDC-based MatButton', () => {
).toBe(true);
});
+ it('should be able to configure the default color of buttons', () => {
+ @Component({
+ template: ``,
+ standalone: true,
+ imports: [MatButtonModule],
+ })
+ class ConfigTestApp {}
+
+ TestBed.resetTestingModule();
+ TestBed.configureTestingModule({
+ imports: [MatButtonModule, ConfigTestApp],
+ providers: [
+ {
+ provide: MAT_BUTTON_CONFIG,
+ useValue: {color: 'warn'},
+ },
+ ],
+ });
+ const fixture = TestBed.createComponent(ConfigTestApp);
+ fixture.detectChanges();
+ const button = fixture.nativeElement.querySelector('button');
+ expect(button.classList).toContain('mat-warn');
+ });
+
describe('interactive disabled buttons', () => {
let fixture: ComponentFixture;
let button: HTMLButtonElement;
diff --git a/tools/public_api_guard/material/button.md b/tools/public_api_guard/material/button.md
index 35025cf91fbd..ed467daf7477 100644
--- a/tools/public_api_guard/material/button.md
+++ b/tools/public_api_guard/material/button.md
@@ -47,6 +47,7 @@ export class MatButton extends MatButtonBase {
// @public
export interface MatButtonConfig {
+ color?: ThemePalette;
disabledInteractive?: boolean;
}