diff --git a/src/demo-app/toolbar/toolbar-demo.html b/src/demo-app/toolbar/toolbar-demo.html
index fa7f900c945d..db46064beaa0 100644
--- a/src/demo-app/toolbar/toolbar-demo.html
+++ b/src/demo-app/toolbar/toolbar-demo.html
@@ -1,40 +1,58 @@
-
- menu
- Default Toolbar
+
+ Default Toolbar
- code
+
+
+
- menu
- Primary Toolbar
+
+ Primary Toolbar
- code
+
+
- menu
- Accent Toolbar
+
+ Accent Toolbar
- code
+
+
+
-
+
First Row
Second Row
diff --git a/src/demo-app/toolbar/toolbar-demo.scss b/src/demo-app/toolbar/toolbar-demo.scss
index a433f45b5cb9..fa679ae89f1f 100644
--- a/src/demo-app/toolbar/toolbar-demo.scss
+++ b/src/demo-app/toolbar/toolbar-demo.scss
@@ -9,4 +9,7 @@
flex: 1 1 auto;
}
+ button {
+ margin: 0 4px;
+ }
}
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
index 661cb8015bec..149a4b6e96ed 100644
--- a/src/lib/button/_button-theme.scss
+++ b/src/lib/button/_button-theme.scss
@@ -76,7 +76,8 @@
$foreground: map-get($theme, foreground);
.mat-button, .mat-icon-button {
- background: transparent;
+ color: mat-color($foreground, text);
+ background-color: transparent;
@include _mat-button-focus-color($theme);
@include _mat-button-theme-color($theme, 'color');
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 952889dd9a34..70b4e4009b83 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -52,7 +52,6 @@
// The text and icon should be vertical aligned inside a button
.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
- color: currentColor;
.mat-button-wrapper > * {
vertical-align: middle;
}
diff --git a/src/lib/button/button.spec.ts b/src/lib/button/button.spec.ts
index 846f89563dbd..7b511eeb0818 100644
--- a/src/lib/button/button.spec.ts
+++ b/src/lib/button/button.spec.ts
@@ -2,7 +2,7 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MatButtonModule, MatButton} from './index';
-import {MatRipple} from '@angular/material/core';
+import {MatRipple, ThemePalette} from '@angular/material/core';
describe('MatButton', () => {
@@ -41,6 +41,29 @@ describe('MatButton', () => {
expect(aDebugElement.nativeElement.classList).not.toContain('mat-accent');
});
+ it('should mark buttons without a background color and theme as plain buttons', () => {
+ const fixture = TestBed.createComponent(TestApp);
+ const buttonDebugEl = fixture.debugElement.query(By.css('button'));
+ const anchorDebugEl = fixture.debugElement.query(By.css('a'));
+ const fabDebugEl = fixture.debugElement.query(By.css('[mat-fab]'));
+
+ fixture.detectChanges();
+
+ // Buttons that have no background color and theme palette are considered as plain buttons.
+ expect(buttonDebugEl.nativeElement.classList).toContain('mat-plain-button');
+ expect(anchorDebugEl.nativeElement.classList).toContain('mat-plain-button');
+ expect(fabDebugEl.nativeElement.classList).not.toContain('mat-plain-button');
+
+ fixture.componentInstance.buttonColor = 'primary';
+ fixture.detectChanges();
+
+ // Buttons that have no background color, but use an explicit theme palette, are not
+ // considered as plain buttons.
+ expect(buttonDebugEl.nativeElement.classList).not.toContain('mat-plain-button');
+ expect(anchorDebugEl.nativeElement.classList).not.toContain('mat-plain-button');
+ expect(fabDebugEl.nativeElement.classList).not.toContain('mat-plain-button');
+ });
+
it('should expose the ripple instance', () => {
const fixture = TestBed.createComponent(TestApp);
const button = fixture.debugElement.query(By.css('button')).componentInstance as MatButton;
@@ -259,6 +282,7 @@ class TestApp {
clickCount: number = 0;
isDisabled: boolean = false;
rippleDisabled: boolean = false;
+ buttonColor: ThemePalette;
increment() {
this.clickCount++;
diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts
index b68b417c3c97..d3bb04a5f3e5 100644
--- a/src/lib/button/button.ts
+++ b/src/lib/button/button.ts
@@ -103,6 +103,7 @@ export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(M
exportAs: 'matButton',
host: {
'[disabled]': 'disabled || null',
+ '[class.mat-plain-button]': '_isPlainButton()',
},
templateUrl: 'button.html',
styleUrls: ['button.css'],
@@ -120,6 +121,9 @@ export class MatButton extends _MatButtonMixinBase
/** Whether the button is icon button. */
_isIconButton: boolean = this._hasHostAttributes('mat-icon-button');
+ /** Whether the button is a flat button. */
+ _isFlatButton: boolean = this._hasHostAttributes('mat-button');
+
/** Reference to the MatRipple instance of the button. */
@ViewChild(MatRipple) ripple: MatRipple;
@@ -152,6 +156,14 @@ export class MatButton extends _MatButtonMixinBase
return this.disableRipple || this.disabled;
}
+ /**
+ * Whether the button is a plain button. Plain buttons are buttons without a background
+ * color and theme color set.
+ */
+ _isPlainButton() {
+ return !this.color && (this._isIconButton || this._isFlatButton);
+ }
+
/** Gets whether the button has one of the given attributes. */
_hasHostAttributes(...attributes: string[]) {
// If not on the browser, say that there are none of the attributes present.
@@ -176,6 +188,7 @@ export class MatButton extends _MatButtonMixinBase
'[attr.tabindex]': 'disabled ? -1 : 0',
'[attr.disabled]': 'disabled || null',
'[attr.aria-disabled]': 'disabled.toString()',
+ '[class.mat-plain-button]': '_isPlainButton()',
'(click)': '_haltDisabledEvents($event)',
},
inputs: ['disabled', 'disableRipple', 'color'],
diff --git a/src/lib/toolbar/toolbar.scss b/src/lib/toolbar/toolbar.scss
index e6b4cb21650b..f8958715a8f3 100644
--- a/src/lib/toolbar/toolbar.scss
+++ b/src/lib/toolbar/toolbar.scss
@@ -30,6 +30,12 @@ $mat-toolbar-row-padding: 16px !default;
// Per Material specs a toolbar cannot have multiple lines inside of a single row.
// Disable text wrapping inside of the toolbar. Developers are still able to overwrite it.
white-space: nowrap;
+
+ // Plain buttons (buttons without a background color and color palette) should inherit the color
+ // from the toolbar row, because otherwise the text will be unreadable on themed toolbars.
+ .mat-plain-button {
+ color: inherit;
+ }
}
.mat-toolbar-multiple-rows {