diff --git a/src/material-examples/button-card/button-card-example.css b/src/material-examples/button-card/button-card-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/material-examples/button-card/button-card-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/material-examples/button-card/button-card-example.html b/src/material-examples/button-card/button-card-example.html
new file mode 100644
index 000000000000..b19d4038d6b4
--- /dev/null
+++ b/src/material-examples/button-card/button-card-example.html
@@ -0,0 +1,9 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Card with action buttons</mat-card-title>
+  </mat-card-header>
+  <mat-card-actions align="end">
+    <button mat-button aria-label="Example cancel button in card">Cancel</button>
+    <button mat-button aria-label="Example accept button in card" color="primary">Accept</button>
+  </mat-card-actions>
+</mat-card>
diff --git a/src/material-examples/button-card/button-card-example.ts b/src/material-examples/button-card/button-card-example.ts
new file mode 100644
index 000000000000..e60b22ab2283
--- /dev/null
+++ b/src/material-examples/button-card/button-card-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Button usage in cards
+ */
+@Component({
+  selector: 'button-card-example',
+  templateUrl: 'button-card-example.html',
+  styleUrls: ['button-card-example.css'],
+})
+export class ButtonCardExample {}
diff --git a/src/material-examples/button-overview/button-overview-example.css b/src/material-examples/button-overview/button-overview-example.css
index 7432308753e6..06771783ca91 100644
--- a/src/material-examples/button-overview/button-overview-example.css
+++ b/src/material-examples/button-overview/button-overview-example.css
@@ -1 +1,16 @@
-/** No CSS for this example */
+.example-button-row {
+  background: #f3f3f3;
+  padding: 16px;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+}
+
+.example-button-row .mat-button,
+.example-button-row .mat-raised-button,
+.example-button-row .mat-icon-button,
+.example-button-row .mat-fab,
+.example-button-row .mat-mini-fab {
+  text-transform: uppercase;
+  margin: 0 8px;
+}
diff --git a/src/material-examples/button-overview/button-overview-example.html b/src/material-examples/button-overview/button-overview-example.html
index 0dcb901d1d1c..a6c5eb5736ce 100644
--- a/src/material-examples/button-overview/button-overview-example.html
+++ b/src/material-examples/button-overview/button-overview-example.html
@@ -1 +1,76 @@
-<button mat-button>Click me!</button>
+<h3>Basic Buttons</h3>
+<div class="example-button-row">
+  <button mat-button aria-label="Example flat button">Basic</button>
+  <button mat-button aria-label="Example flat primary colored button" color="primary">Primary</button>
+  <button mat-button aria-label="Example flat accent colored button" color="accent">Accent</button>
+  <button mat-button aria-label="Example flat warn colored button" color="warn">Warn</button>
+  <button mat-button aria-label="Example flat disabled button" disabled>Disabled</button>
+  <a mat-button aria-label="Example flat anchor button" routerLink=".">Link</a>
+</div>
+
+<h3>Raised Buttons</h3>
+<div class="example-button-row">
+  <button mat-raised-button aria-label="Example raised button">Basic</button>
+  <button mat-raised-button aria-label="Example raised primary colored button" color="primary">Primary</button>
+  <button mat-raised-button aria-label="Example raised accent colored button" color="accent">Accent</button>
+  <button mat-raised-button aria-label="Example raised warn colored button" color="warn">Warn</button>
+  <button mat-raised-button aria-label="Example raised disabled button" disabled>Disabled</button>
+  <a mat-raised-button aria-label="Example raised anchor button" routerLink=".">Link</a>
+</div>
+
+<h3>Icon Buttons</h3>
+<div class="example-button-row">
+  <button mat-icon-button aria-label="Example icon-button with a heart icon">
+    <mat-icon>favorite</mat-icon>
+  </button>
+  <button mat-icon-button color="primary" aria-label="Example icon-button with a more vertical icon">
+    <mat-icon>more_vert</mat-icon>
+  </button>
+  <button mat-icon-button color="accent" aria-label="Example icon-button with a launch icon">
+    <mat-icon>launch</mat-icon>
+  </button>
+  <button mat-icon-button color="warn" aria-label="Example icon-button with a menu icon">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <button mat-icon-button disabled aria-label="Example icon-button with a close icon">
+    <mat-icon>close</mat-icon>
+  </button>
+</div>
+
+<h3>Fab Buttons</h3>
+<div class="example-button-row">
+  <button mat-fab aria-label="Example icon-button with a people icon">
+    <mat-icon>add</mat-icon>
+  </button>
+  <button mat-fab color="primary" aria-label="Example icon-button with a people icon">
+    <mat-icon>people</mat-icon>
+  </button>
+  <button mat-fab color="warn" aria-label="Example icon-button with a star icon">
+    <mat-icon>star</mat-icon>
+  </button>
+  <button mat-fab disabled aria-label="Example icon-button with a comment icon">
+    <mat-icon>comment</mat-icon>
+  </button>
+  <button mat-fab aria-label="Example icon-button with a cake icon">
+    <mat-icon>cake</mat-icon>
+  </button>
+</div>
+
+<h3>Mini Fab Buttons</h3>
+<div class="example-button-row">
+  <button mat-mini-fab aria-label="Example icon-button with a people icon">
+    <mat-icon>add</mat-icon>
+  </button>
+  <button mat-mini-fab color="primary" aria-label="Example icon-button with a people icon">
+    <mat-icon>people</mat-icon>
+  </button>
+  <button mat-mini-fab color="warn" aria-label="Example icon-button with a star icon">
+    <mat-icon>star</mat-icon>
+  </button>
+  <button mat-mini-fab disabled aria-label="Example icon-button with a comment icon">
+    <mat-icon>comment</mat-icon>
+  </button>
+  <button mat-mini-fab aria-label="Example icon-button with a cake icon">
+    <mat-icon>cake</mat-icon>
+  </button>
+</div>
diff --git a/src/material-examples/button-overview/button-overview-example.ts b/src/material-examples/button-overview/button-overview-example.ts
index 9dbde6873eba..9b5624e057fd 100644
--- a/src/material-examples/button-overview/button-overview-example.ts
+++ b/src/material-examples/button-overview/button-overview-example.ts
@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'button-overview-example',
   templateUrl: 'button-overview-example.html',
+  styleUrls: ['button-overview-example.css']
 })
 export class ButtonOverviewExample {}
diff --git a/src/material-examples/button-toolbar/button-toolbar-example.css b/src/material-examples/button-toolbar/button-toolbar-example.css
new file mode 100644
index 000000000000..1a8529e88cf7
--- /dev/null
+++ b/src/material-examples/button-toolbar/button-toolbar-example.css
@@ -0,0 +1,3 @@
+.example-spacer {
+  flex: 1;
+}
diff --git a/src/material-examples/button-toolbar/button-toolbar-example.html b/src/material-examples/button-toolbar/button-toolbar-example.html
new file mode 100644
index 000000000000..3237711761ab
--- /dev/null
+++ b/src/material-examples/button-toolbar/button-toolbar-example.html
@@ -0,0 +1,10 @@
+<mat-toolbar color="primary">
+  <button mat-icon-button aria-label="Example icon-button with a menu icon">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <span>Toolbar with icon buttons</span>
+  <span class="example-spacer"></span>
+  <button mat-icon-button aria-label="Example icon-button with a more vertical icon">
+    <mat-icon>more_vert</mat-icon>
+  </button>
+</mat-toolbar>
diff --git a/src/material-examples/button-toolbar/button-toolbar-example.ts b/src/material-examples/button-toolbar/button-toolbar-example.ts
new file mode 100644
index 000000000000..47088e66bf56
--- /dev/null
+++ b/src/material-examples/button-toolbar/button-toolbar-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Icon button usage in toolbar
+ */
+@Component({
+  selector: 'button-toolbar-example',
+  templateUrl: 'button-toolbar-example.html',
+  styleUrls: ['button-toolbar-example.css'],
+})
+export class ButtonToolbarExample {}
diff --git a/src/material-examples/button-types/button-types-example.css b/src/material-examples/button-types/button-types-example.css
deleted file mode 100644
index 9771bda678bf..000000000000
--- a/src/material-examples/button-types/button-types-example.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.example-button-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
diff --git a/src/material-examples/button-types/button-types-example.html b/src/material-examples/button-types/button-types-example.html
deleted file mode 100644
index 852556d94561..000000000000
--- a/src/material-examples/button-types/button-types-example.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<h3>Basic Buttons</h3>
-<div class="button-row">
-  <button mat-button>Basic</button>
-  <button mat-button color="primary">Primary</button>
-  <button mat-button color="accent">Accent</button>
-  <button mat-button color="warn">Warn</button>
-  <button mat-button disabled>Disabled</button>
-  <a mat-button routerLink=".">Link</a>
-</div>
-
-<h3>Raised Buttons</h3>
-<div class="button-row">
-  <button mat-raised-button>Basic</button>
-  <button mat-raised-button color="primary">Primary</button>
-  <button mat-raised-button color="accent">Accent</button>
-  <button mat-raised-button color="warn">Warn</button>
-  <button mat-raised-button disabled>Disabled</button>
-  <a mat-raised-button routerLink=".">Link</a>
-</div>
-
-<h3>Icon Buttons</h3>
-<div class="button-row">
-  <button mat-icon-button>
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
-  </button>
-  <button mat-icon-button color="primary">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
-  </button>
-  <button mat-icon-button color="accent">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
-  </button>
-  <button mat-icon-button color="warn">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
-  </button>
-  <button mat-icon-button disabled>
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
-  </button>
-</div>
-
-<h3>Fab Buttons</h3>
-<div class="button-row">
-  <button mat-fab>Basic</button>
-  <button mat-fab color="primary">Primary</button>
-  <button mat-fab color="accent">Accent</button>
-  <button mat-fab color="warn">Warn</button>
-  <button mat-fab disabled>Disabled</button>
-  <button mat-fab>
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
-  </button>
-  <a mat-fab routerLink=".">Link</a>
-</div>
-
-<h3>Mini Fab Buttons</h3>
-<div class="button-row">
-  <button mat-mini-fab>Basic</button>
-  <button mat-mini-fab color="primary">Primary</button>
-  <button mat-mini-fab color="accent">Accent</button>
-  <button mat-mini-fab color="warn">Warn</button>
-  <button mat-mini-fab disabled>Disabled</button>
-  <button mat-mini-fab>
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
-  </button>
-  <a mat-mini-fab routerLink=".">Link</a>
-</div>
diff --git a/src/material-examples/button-types/button-types-example.ts b/src/material-examples/button-types/button-types-example.ts
deleted file mode 100644
index 525729b2cc08..000000000000
--- a/src/material-examples/button-types/button-types-example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Button varieties
- */
-@Component({
-  selector: 'button-types-example',
-  templateUrl: 'button-types-example.html',
-  styleUrls: ['button-types-example.css'],
-})
-export class ButtonTypesExample {}
diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts
index 868749123e63..fb6b8049e126 100644
--- a/src/material-examples/example-module.ts
+++ b/src/material-examples/example-module.ts
@@ -20,7 +20,8 @@ import {AutocompleteSimpleExample} from './autocomplete-simple/autocomplete-simp
 import {ButtonOverviewExample} from './button-overview/button-overview-example';
 import {ButtonToggleExclusiveExample} from './button-toggle-exclusive/button-toggle-exclusive-example';
 import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
-import {ButtonTypesExample} from './button-types/button-types-example';
+import {ButtonCardExample} from "./button-card/button-card-example";
+import {ButtonToolbarExample} from "./button-toolbar/button-toolbar-example";
 import {CardFancyExample} from './card-fancy/card-fancy-example';
 import {CardOverviewExample} from './card-overview/card-overview-example';
 import {CdkTableBasicExample} from './cdk-table-basic/cdk-table-basic-example';
@@ -170,9 +171,15 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: null,
     selectorName: null
   },
-  'button-types': {
-    title: 'Button varieties',
-    component: ButtonTypesExample,
+  'button-card': {
+    title: 'Button usage in cards',
+    component: ButtonCardExample,
+    additionalFiles: null,
+    selectorName: null
+  },
+  'button-toolbar': {
+    title: 'Icon button usage in toolbar',
+    component: ButtonToolbarExample,
     additionalFiles: null,
     selectorName: null
   },
@@ -816,7 +823,8 @@ export const EXAMPLE_LIST = [
   ButtonOverviewExample,
   ButtonToggleExclusiveExample,
   ButtonToggleOverviewExample,
-  ButtonTypesExample,
+  ButtonCardExample,
+  ButtonToolbarExample,
   CardFancyExample,
   CardOverviewExample,
   CdkTableBasicExample,