diff --git a/README.md b/README.md
index cdcd1101f3c6..e93c206ea3e0 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ High level stuff planned for Q4 2018 (October - Dec):
 
 | Feature          | Status                              | Docs         | Issue          |
 |------------------|-------------------------------------|--------------|----------------|
-| fab speed-dial   |            Not started, not planned |           -  |   [#860][0860] |
+| fab speed-dial   |            PR in progress           |           -  |   [#860][0860] |
 | fab toolbar      |            Not started, not planned |           -  |              - |
 | bottom-nav       |            Not started, not planned |           -  |   [#408][0408] |
 
diff --git a/src/dev-app/button/button-demo-module.ts b/src/dev-app/button/button-demo-module.ts
index 351c52b98cb4..312eb5f2b188 100644
--- a/src/dev-app/button/button-demo-module.ts
+++ b/src/dev-app/button/button-demo-module.ts
@@ -7,14 +7,28 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatButtonModule, MatIconModule} from '@angular/material';
+import {FormsModule} from '@angular/forms';
+import {
+  MatButtonModule,
+  MatFormFieldModule,
+  MatIconModule,
+  MatInputModule,
+  MatSelectModule,
+  MatSlideToggleModule
+} from '@angular/material';
 import {RouterModule} from '@angular/router';
+
 import {ButtonDemo} from './button-demo';
 
 @NgModule({
   imports: [
     MatButtonModule,
     MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    FormsModule,
+    MatSlideToggleModule,
     RouterModule.forChild([{path: '', component: ButtonDemo}]),
   ],
   declarations: [ButtonDemo],
diff --git a/src/dev-app/button/button-demo.html b/src/dev-app/button/button-demo.html
index e88d06475acf..0b1ab30b8100 100644
--- a/src/dev-app/button/button-demo.html
+++ b/src/dev-app/button/button-demo.html
@@ -1,115 +1,200 @@
 <div class="demo-button">
-  <h4 class="demo-section-header">Buttons</h4>
-  <section>
-    <button mat-button>normal</button>
-    <button mat-raised-button>raised</button>
-    <button mat-stroked-button>stroked</button>
-    <button mat-flat-button>flat</button>
-    <button mat-fab><mat-icon>check</mat-icon></button>
-    <button mat-mini-fab><mat-icon>check</mat-icon></button>
-  </section>
-
-  <h4 class="demo-section-header">Anchors</h4>
-  <section>
-    <a href="//www.google.com" mat-button color="primary">SEARCH</a>
-    <a href="//www.google.com" mat-raised-button>SEARCH</a>
-    <a href="//www.google.com" mat-stroked-button color="primary">SEARCH</a>
-    <a href="//www.google.com" mat-flat-button>SEARCH</a>
-    <a href="//www.google.com" mat-fab><mat-icon>check</mat-icon></a>
-    <a href="//www.google.com" mat-mini-fab><mat-icon>check</mat-icon></a>
-  </section>
-
-  <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
-  <section>
-    <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>
-  </section>
-
-  <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
-  <section>
-    <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>
-  </section>
-
-  <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
-  <section>
-    <button mat-stroked-button color="primary">primary</button>
-    <button mat-stroked-button color="accent">accent</button>
-    <button mat-stroked-button color="warn">warn</button>
-    <button mat-stroked-button disabled>disabled</button>
-  </section>
-
-  <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
-  <section>
-    <button mat-flat-button color="primary">primary</button>
-    <button mat-flat-button color="accent">accent</button>
-    <button mat-flat-button color="warn">warn</button>
-    <button mat-flat-button disabled>disabled</button>
-  </section>
-
-  <h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
-  <section>
-    <button mat-icon-button color="primary"><mat-icon>cached</mat-icon></button>
-    <button mat-icon-button color="accent"><mat-icon>backup</mat-icon></button>
-    <button mat-icon-button color="warn"><mat-icon>trending_up</mat-icon></button>
-    <button mat-icon-button disabled><mat-icon>visibility</mat-icon></button>
-  </section>
-
-  <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
-  <section>
-    <button mat-fab color="primary"><mat-icon>delete</mat-icon></button>
-    <button mat-fab color="accent"><mat-icon>bookmark</mat-icon></button>
-    <button mat-fab color="warn"><mat-icon>home</mat-icon></button>
-    <button mat-fab disabled><mat-icon>favorite</mat-icon></button>
-  </section>
-
-  <h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
-  <section>
-    <button mat-mini-fab color="primary"><mat-icon>menu</mat-icon></button>
-    <button mat-mini-fab color="accent"><mat-icon>plus_one</mat-icon></button>
-    <button mat-mini-fab color="warn"><mat-icon>filter_list</mat-icon></button>
-    <button mat-mini-fab disabled><mat-icon>home</mat-icon></button>
-  </section>
-
-  <h4 class="demo-section-header">Interaction/State</h4>
-  <section class="demo-no-flex">
-    <div>
-      <p>isDisabled: {{isDisabled}}</p>
-      <p>Button 1 as been clicked {{clickCounter}} times</p>
-      <button mat-flat-button (click)="isDisabled=!isDisabled">
-        {{isDisabled ? 'Enable All' : 'Disable All'}}
-      </button>
-      <button mat-flat-button (click)="button1.focus()">Focus 1</button>
-      <button mat-flat-button (click)="button2.focus()">Focus 2</button>
-      <button mat-flat-button (click)="button3.focus()">Focus 3</button>
-      <button mat-flat-button (click)="button4.focus()">Focus 4</button>
-    </div>
-    <div>
-      <button mat-button #button1 [disabled]="isDisabled"
-              (click)="clickCounter=clickCounter+1">
-        Button 1
-      </button>
-      <button mat-button #button2 color="primary" [disabled]="isDisabled">
-        Button 2
-      </button>
-      <a href="//www.google.com" #button3 mat-button color="accent"
-         [disabled]="isDisabled">
-        Button 3
-      </a>
-      <button mat-raised-button #button4 color="primary"
-              [disabled]="isDisabled">
-        Button 4
-      </button>
-      <button mat-mini-fab [disabled]="isDisabled">
-        <mat-icon>check</mat-icon>
-      </button>
-      <button mat-icon-button color="accent" [disabled]="isDisabled">
-        <mat-icon>favorite</mat-icon>
-      </button>
-    </div>
-  </section>
+    <h4 class="demo-section-header">Buttons</h4>
+    <section>
+        <button mat-button>normal</button>
+        <button mat-raised-button>raised</button>
+        <button mat-stroked-button>stroked</button>
+        <button mat-flat-button>flat</button>
+        <button mat-fab>
+            <mat-icon>check</mat-icon>
+        </button>
+        <button mat-mini-fab>
+            <mat-icon>check</mat-icon>
+        </button>
+    </section>
+
+    <h4 class="demo-section-header">Anchors</h4>
+    <section>
+        <a href="//www.google.com" mat-button color="primary">SEARCH</a>
+        <a href="//www.google.com" mat-raised-button>SEARCH</a>
+        <a href="//www.google.com" mat-stroked-button color="primary">SEARCH</a>
+        <a href="//www.google.com" mat-flat-button>SEARCH</a>
+        <a href="//www.google.com" mat-fab>
+            <mat-icon>check</mat-icon>
+        </a>
+        <a href="//www.google.com" mat-mini-fab>
+            <mat-icon>check</mat-icon>
+        </a>
+    </section>
+
+    <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
+    <section>
+        <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>
+    </section>
+
+    <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
+    <section>
+        <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>
+    </section>
+
+    <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
+    <section>
+        <button mat-stroked-button color="primary">primary</button>
+        <button mat-stroked-button color="accent">accent</button>
+        <button mat-stroked-button color="warn">warn</button>
+        <button mat-stroked-button disabled>disabled</button>
+    </section>
+
+    <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
+    <section>
+        <button mat-flat-button color="primary">primary</button>
+        <button mat-flat-button color="accent">accent</button>
+        <button mat-flat-button color="warn">warn</button>
+        <button mat-flat-button disabled>disabled</button>
+    </section>
+
+    <h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
+    <section>
+        <button mat-icon-button color="primary">
+            <mat-icon>cached</mat-icon>
+        </button>
+        <button mat-icon-button color="accent">
+            <mat-icon>backup</mat-icon>
+        </button>
+        <button mat-icon-button color="warn">
+            <mat-icon>trending_up</mat-icon>
+        </button>
+        <button mat-icon-button disabled>
+            <mat-icon>visibility</mat-icon>
+        </button>
+    </section>
+
+    <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
+    <section>
+        <button mat-fab color="primary">
+            <mat-icon>delete</mat-icon>
+        </button>
+        <button mat-fab color="accent">
+            <mat-icon>bookmark</mat-icon>
+        </button>
+        <button mat-fab color="warn">
+            <mat-icon>home</mat-icon>
+        </button>
+        <button mat-fab disabled>
+            <mat-icon>favorite</mat-icon>
+        </button>
+    </section>
+
+    <h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
+    <section>
+        <button mat-mini-fab color="primary">
+            <mat-icon>menu</mat-icon>
+        </button>
+        <button mat-mini-fab color="accent">
+            <mat-icon>plus_one</mat-icon>
+        </button>
+        <button mat-mini-fab color="warn">
+            <mat-icon>filter_list</mat-icon>
+        </button>
+        <button mat-mini-fab disabled>
+            <mat-icon>home</mat-icon>
+        </button>
+    </section>
+
+    <h4 class="demo-section-header">Interaction/State</h4>
+    <section class="demo-no-flex">
+        <div>
+            <p>isDisabled: {{isDisabled}}</p>
+            <p>Button 1 as been clicked {{clickCounter}} times</p>
+            <button mat-flat-button (click)="isDisabled=!isDisabled">
+                {{isDisabled ? 'Enable All' : 'Disable All'}}
+            </button>
+            <button mat-flat-button (click)="button1.focus()">Focus 1</button>
+            <button mat-flat-button (click)="button2.focus()">Focus 2</button>
+            <button mat-flat-button (click)="button3.focus()">Focus 3</button>
+            <button mat-flat-button (click)="button4.focus()">Focus 4</button>
+        </div>
+        <div>
+            <button mat-button #button1 [disabled]="isDisabled"
+                    (click)="clickCounter=clickCounter+1">
+                Button 1
+            </button>
+            <button mat-button #button2 color="primary" [disabled]="isDisabled">
+                Button 2
+            </button>
+            <a href="//www.google.com" #button3 mat-button color="accent"
+               [disabled]="isDisabled">
+                Button 3
+            </a>
+            <button mat-raised-button #button4 color="primary"
+                    [disabled]="isDisabled">
+                Button 4
+            </button>
+            <button mat-mini-fab [disabled]="isDisabled">
+                <mat-icon>check</mat-icon>
+            </button>
+            <button mat-icon-button color="accent" [disabled]="isDisabled">
+                <mat-icon>favorite</mat-icon>
+            </button>
+        </div>
+    </section>
+
+    <h4 class="demo-section-header"> Speed dial Fab Button [mat-fab-dial]</h4>
+    <section class="demo-section-fab-dial">
+        <section class="demo-fab-dial-control">
+            <form>
+                <mat-form-field>
+                    <mat-label>Colors</mat-label>
+                    <select matNativeControl name="colors" [(ngModel)]="colorFab">
+                        <option value="primary" selected>Primary</option>
+                        <option value="accent">Accent</option>
+                        <option value="warn">Warning</option>
+                    </select>
+                </mat-form-field>
+
+
+                <mat-slide-toggle [(ngModel)]="disableFab" name="disable">
+                    Disabled
+                </mat-slide-toggle>
+                <!-- direction -->
+                <mat-form-field>
+                    <mat-label>direction</mat-label>
+                    <select matNativeControl name="direction" [(ngModel)]="directionFab">
+                        <option value="vertical" selected>Vertical</option>
+                        <option value="horizontal">Horizontal</option>
+                    </select>
+                </mat-form-field>
+                <!-- placement -->
+                <mat-form-field>
+                    <mat-label>Placement</mat-label>
+                    <select matNativeControl name="placement" [(ngModel)]="placementFab">
+                        <option value="top" selected>Top</option>
+                        <option value="bottom">Bottom</option>
+                    </select>
+                </mat-form-field>
+
+            </form>
+
+        </section>
+
+        <mat-fab-dial [color]="colorFab" [attr.placement]="placementFab"
+                      [attr.direction]="directionFab" [disabled]="disableFab">
+            <button mat-mini-fab color="accent">
+                <mat-icon>plus_one</mat-icon>
+            </button>
+            <button mat-mini-fab color="warn">
+                <mat-icon>filter_list</mat-icon>
+            </button>
+            <button mat-mini-fab disabled>
+                <mat-icon>home</mat-icon>
+            </button>
+        </mat-fab-dial>
+
+    </section>
 </div>
diff --git a/src/dev-app/button/button-demo.scss b/src/dev-app/button/button-demo.scss
index 74bd52e8046a..8caef30c6455 100644
--- a/src/dev-app/button/button-demo.scss
+++ b/src/dev-app/button/button-demo.scss
@@ -23,3 +23,10 @@
     display: block;
   }
 }
+
+.demo-section-fab-dial {
+  min-height: 10vh;
+  mat-form-field {
+    margin: 0.5rem 1rem;
+  }
+}
diff --git a/src/dev-app/button/button-demo.ts b/src/dev-app/button/button-demo.ts
index c10962c132c9..4fdb83d939f5 100644
--- a/src/dev-app/button/button-demo.ts
+++ b/src/dev-app/button/button-demo.ts
@@ -7,6 +7,7 @@
  */
 
 import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material';
 
 
 @Component({
@@ -19,4 +20,15 @@ export class ButtonDemo {
   isDisabled: boolean = false;
   clickCounter: number = 0;
   toggleDisable: boolean = false;
+
+  _colorFab: ThemePalette = 'primary';
+  get colorFab(): ThemePalette {
+    return this._colorFab;
+  }
+  set colorFab(value: ThemePalette) {
+    this._colorFab = value;
+  }
+  disableFab: boolean = false;
+  directionFab: 'horizontal'|'vertical' = 'vertical';
+  placementFab: 'top'|'bottom' = 'bottom';
 }
diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
index dc9377d45d78..42554525b97d 100644
--- a/src/lib/button/_button-base.scss
+++ b/src/lib/button/_button-base.scss
@@ -11,7 +11,7 @@ $mat-button-margin: 0 !default;
 $mat-button-line-height: 36px !default;
 $mat-button-border-radius: 4px !default;
 $mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function,
-                              background-color 200ms $swift-ease-in-out-timing-function !default;
+background-color 200ms $swift-ease-in-out-timing-function !default;
 
 // Stroked button padding is 1px less horizontally than default/flat/raised
 // button's padding.
@@ -32,77 +32,81 @@ $mat-fab-padding: 16px !default;
 $mat-mini-fab-size: 40px !default;
 $mat-mini-fab-padding: 8px !default;
 
+// Fab Speed Dial
+$mat-fab-dial-margin: 32px !default;
+
 // Applies base styles to all button types.
 @mixin mat-button-base {
-  box-sizing: border-box;
-  position: relative;
-
-  // Reset browser <button> styles.
-  @include mat-button-reset();
-
-  // Make anchors render like buttons.
-  display: inline-block;
-  white-space: nowrap;
-  text-decoration: none;
-  vertical-align: baseline;
-  text-align: center;
-
-  // Sizing.
-  margin: $mat-button-margin;
-  min-width: $mat-button-min-width;
-  line-height: $mat-button-line-height;
-  padding: $mat-button-padding;
-  border-radius: $mat-button-border-radius;
-
-  // Explicitly set the default overflow to `visible`. It is already set
-  // on most browsers except on IE11 where it defaults to `hidden`.
-  overflow: visible;
-
-  &[disabled] {
-    cursor: default;
-  }
-
-  &.cdk-keyboard-focused, &.cdk-program-focused {
-    .mat-button-focus-overlay {
-      opacity: 0.12;
+    box-sizing: border-box;
+    position: relative;
+
+    // Reset browser <button> styles.
+    @include mat-button-reset();
+
+    // Make anchors render like buttons.
+    display: inline-block;
+    white-space: nowrap;
+    text-decoration: none;
+    vertical-align: baseline;
+    text-align: center;
+
+    // Sizing.
+    margin: $mat-button-margin;
+    min-width: $mat-button-min-width;
+    line-height: $mat-button-line-height;
+    padding: $mat-button-padding;
+    border-radius: $mat-button-border-radius;
+
+    // Explicitly set the default overflow to `visible`. It is already set
+    // on most browsers except on IE11 where it defaults to `hidden`.
+    overflow: visible;
+
+    &[disabled] {
+        cursor: default;
+    }
+
+    &.cdk-keyboard-focused,
+    &.cdk-program-focused {
+        .mat-button-focus-overlay {
+            opacity: 0.12;
+        }
     }
-  }
 
-  &::-moz-focus-inner {
-    border: 0;
-  }
+    &::-moz-focus-inner {
+        border: 0;
+    }
 }
 
 // Applies styles to buttons with backgrounds: raised, fab, and mini-fab
 @mixin mat-raised-button {
-  @include mat-button-base;
-  @include _noop-animation();
+    @include mat-button-base;
+    @include _noop-animation();
 
-  // Force hardware acceleration.
-  transform: translate3d(0, 0, 0);
+    // Force hardware acceleration.
+    transform: translate3d(0, 0, 0);
 
-  // Animation.
-  transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
-              mat-elevation-transition-property-value();
+    // Animation.
+    transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
+        mat-elevation-transition-property-value();
 }
 
 // Applies styles to fab and mini-fab button types only
 @mixin mat-fab($size, $padding) {
-  @include mat-raised-button;
+    @include mat-raised-button;
 
-  // Reset the min-width from the button base.
-  min-width: 0;
+    // Reset the min-width from the button base.
+    min-width: 0;
 
-  border-radius: $mat-fab-border-radius;
-  width: $size;
-  height: $size;
-  padding: 0;
+    border-radius: $mat-fab-border-radius;
+    width: $size;
+    height: $size;
+    padding: 0;
 
-  flex-shrink: 0;
+    flex-shrink: 0;
 
-  .mat-button-wrapper {
-    padding: $padding 0;
-    display: inline-block;
-    line-height: $mat-icon-button-line-height;
-  }
-}
+    .mat-button-wrapper {
+        padding: $padding 0;
+        display: inline-block;
+        line-height: $mat-icon-button-line-height;
+    }
+}
\ No newline at end of file
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
index aeb43c96174f..f155a70221eb 100644
--- a/src/lib/button/_button-theme.scss
+++ b/src/lib/button/_button-theme.scss
@@ -1,159 +1,179 @@
 @import '../core/theming/theming';
 @import '../core/style/elevation';
 @import '../core/typography/typography-utils';
-
+@import '../core/theming/palette';
+@import '../../cdk/a11y/a11y';
+@import '../core/style/layout-common';
 $_mat-button-ripple-opacity: 0.1;
 
 // Applies a focus style to an mat-button element for each of the supported palettes.
 @mixin _mat-button-focus-overlay-color($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
 
-  &.mat-primary .mat-button-focus-overlay {
-    background-color: mat-color($primary);
-  }
+    &.mat-primary .mat-button-focus-overlay {
+        background-color: mat-color($primary);
+    }
 
-  &.mat-accent .mat-button-focus-overlay {
-    background-color: mat-color($accent);
-  }
+    &.mat-accent .mat-button-focus-overlay {
+        background-color: mat-color($accent);
+    }
 
-  &.mat-warn .mat-button-focus-overlay {
-    background-color: mat-color($warn);
-  }
+    &.mat-warn .mat-button-focus-overlay {
+        background-color: mat-color($warn);
+    }
 
-  &[disabled] .mat-button-focus-overlay {
-    background-color: transparent;
-  }
+    &[disabled] .mat-button-focus-overlay {
+        background-color: transparent;
+    }
 }
 
 @mixin _mat-button-ripple-color($theme, $hue, $opacity: $_mat-button-ripple-opacity) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
 
-  &.mat-primary .mat-ripple-element {
-    background-color: mat-color($primary, $hue, $opacity);
-  }
+    &.mat-primary .mat-ripple-element {
+        background-color: mat-color($primary, $hue, $opacity);
+    }
 
-  &.mat-accent .mat-ripple-element {
-    background-color: mat-color($accent, $hue, $opacity);
-  }
+    &.mat-accent .mat-ripple-element {
+        background-color: mat-color($accent, $hue, $opacity);
+    }
 
-  &.mat-warn .mat-ripple-element {
-    background-color: mat-color($warn, $hue, $opacity);
-  }
+    &.mat-warn .mat-ripple-element {
+        background-color: mat-color($warn, $hue, $opacity);
+    }
 }
 
 // Applies a property to an mat-button element for each of the supported palettes.
 @mixin _mat-button-theme-property($theme, $property, $hue) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  &.mat-primary {
-    #{$property}: mat-color($primary, $hue);
-  }
-  &.mat-accent {
-    #{$property}: mat-color($accent, $hue);
-  }
-  &.mat-warn {
-    #{$property}: mat-color($warn, $hue);
-  }
-
-  &.mat-primary, &.mat-accent, &.mat-warn, &[disabled] {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    &.mat-primary {
+        #{$property}: mat-color($primary, $hue);
+    }
+
+    &.mat-accent {
+        #{$property}: mat-color($accent, $hue);
+    }
+
+    &.mat-warn {
+        #{$property}: mat-color($warn, $hue);
+    }
+
+    &.mat-primary,
+    &.mat-accent,
+    &.mat-warn,
     &[disabled] {
-      $palette: if($property == 'color', $foreground, $background);
-      #{$property}: mat-color($palette, disabled-button);
+        &[disabled] {
+            $palette: if($property=='color', $foreground, $background);
+            #{$property}: mat-color($palette, disabled-button);
+        }
     }
-  }
 }
 
 @mixin mat-button-theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  .mat-button, .mat-icon-button, .mat-stroked-button {
-    // Buttons without a background color should inherit the font color. This is necessary to
-    // ensure that the button is readable on custom background colors. It's wrong to always assume
-    // that those buttons are always placed inside of containers with the default background
-    // color of the theme (e.g. themed toolbars).
-    color: inherit;
-    background: transparent;
-
-    @include _mat-button-theme-property($theme, 'color', default);
-    @include _mat-button-focus-overlay-color($theme);
-
-    // Setup the ripple color to be based on the text color. This ensures that the ripples
-    // are matching with the current theme palette and are in contrast to the background color
-    // (e.g in themed toolbars).
-    .mat-ripple-element {
-      opacity: $_mat-button-ripple-opacity;
-      background-color: currentColor;
-    }
-  }
-
-  .mat-button-focus-overlay {
-    background: map_get($foreground, base);
-  }
-
-  // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion
-  // order of the theme styles and the button reset may end up resetting this as well.
-  .mat-stroked-button:not([disabled]) {
-    border-color: mat-color($foreground, divider);
-  }
-
-  .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
-    // Default font and background color when not using any color palette.
-    color: mat-color($foreground, text);
-    background-color: mat-color($background, raised-button);
-
-    @include _mat-button-theme-property($theme, 'color', default-contrast);
-    @include _mat-button-theme-property($theme, 'background-color', default);
-    @include _mat-button-ripple-color($theme, default-contrast);
-  }
-
-  .mat-stroked-button, .mat-flat-button {
-    @include _mat-theme-overridable-elevation(0, $theme);
-  }
-
-  .mat-raised-button {
-    @include _mat-theme-overridable-elevation(2, $theme);
-
-    &:not([disabled]):active {
-      @include _mat-theme-overridable-elevation(8, $theme);
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .mat-button,
+    .mat-icon-button,
+    .mat-stroked-button {
+        // Buttons without a background color should inherit the font color. This is necessary to
+        // ensure that the button is readable on custom background colors. It's wrong to always assume
+        // that those buttons are always placed inside of containers with the default background
+        // color of the theme (e.g. themed toolbars).
+        color: inherit;
+        background: transparent;
+
+        @include _mat-button-theme-property($theme, 'color', default);
+        @include _mat-button-focus-overlay-color($theme);
+
+        // Setup the ripple color to be based on the text color. This ensures that the ripples
+        // are matching with the current theme palette and are in contrast to the background color
+        // (e.g in themed toolbars).
+        .mat-ripple-element {
+            opacity: $_mat-button-ripple-opacity;
+            background-color: currentColor;
+        }
     }
 
-    &[disabled] {
-      @include _mat-theme-overridable-elevation(0, $theme);
+    .mat-button-focus-overlay {
+        background: map_get($foreground, base);
     }
-  }
 
-  .mat-fab, .mat-mini-fab {
-    @include _mat-theme-overridable-elevation(6, $theme);
+    // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion
+    // order of the theme styles and the button reset may end up resetting this as well.
+    .mat-stroked-button:not([disabled]) {
+        border-color: mat-color($foreground, divider);
+    }
 
-    &:not([disabled]):active {
-      @include _mat-theme-overridable-elevation(12, $theme);
+    .mat-flat-button,
+    .mat-raised-button,
+    .mat-fab,
+    .mat-mini-fab {
+        // Default font and background color when not using any color palette.
+        color: mat-color($foreground, text);
+        background-color: mat-color($background, raised-button);
+
+        @include _mat-button-theme-property($theme, 'color', default-contrast);
+        @include _mat-button-theme-property($theme, 'background-color', default);
+        @include _mat-button-ripple-color($theme, default-contrast);
     }
 
-    &[disabled] {
-      @include _mat-theme-overridable-elevation(0, $theme);
+    .mat-stroked-button,
+    .mat-flat-button {
+        @include _mat-theme-overridable-elevation(0, $theme);
+    }
+
+    .mat-raised-button {
+        @include _mat-theme-overridable-elevation(2, $theme);
+
+        &:not([disabled]):active {
+            @include _mat-theme-overridable-elevation(8, $theme);
+        }
+
+        &[disabled] {
+            @include _mat-theme-overridable-elevation(0, $theme);
+        }
+    }
+
+    .mat-fab,
+    .mat-mini-fab {
+        @include _mat-theme-overridable-elevation(6, $theme);
+
+        &:not([disabled]):active {
+            @include _mat-theme-overridable-elevation(12, $theme);
+        }
+
+        &[disabled] {
+            @include _mat-theme-overridable-elevation(0, $theme);
+        }
     }
-  }
 }
 
 @mixin mat-button-typography($config) {
-  .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,
-  .mat-flat-button, .mat-fab, .mat-mini-fab {
-    font: {
-      family: mat-font-family($config, button);
-      size: mat-font-size($config, button);
-      weight: mat-font-weight($config, button);
-    }
-  }
-}
+
+    .mat-button,
+    .mat-raised-button,
+    .mat-icon-button,
+    .mat-stroked-button,
+    .mat-flat-button,
+    .mat-fab,
+    .mat-mini-fab {
+        font: {
+            family: mat-font-family($config, button);
+            size: mat-font-size($config, button);
+            weight: mat-font-weight($config, button);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/lib/button/button-module.ts b/src/lib/button/button-module.ts
index dd40b713033a..874c0b32239b 100644
--- a/src/lib/button/button-module.ts
+++ b/src/lib/button/button-module.ts
@@ -9,23 +9,15 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule, MatRippleModule} from '@angular/material/core';
-import {MatAnchor, MatButton} from './button';
+import {MatIconModule} from '@angular/material/icon';
+
+import {MatAnchor, MatButton, MatDialButton, MatFabDialList} from './button';
 
 
 @NgModule({
-  imports: [
-    CommonModule,
-    MatRippleModule,
-    MatCommonModule,
-  ],
-  exports: [
-    MatButton,
-    MatAnchor,
-    MatCommonModule,
-  ],
-  declarations: [
-    MatButton,
-    MatAnchor,
-  ],
+  imports: [CommonModule, MatRippleModule, MatCommonModule, MatIconModule],
+  exports: [MatButton, MatAnchor, MatDialButton, MatCommonModule, MatFabDialList],
+  declarations: [MatButton, MatAnchor, MatDialButton, MatFabDialList],
 })
-export class MatButtonModule {}
+export class MatButtonModule {
+}
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index b920ed5fab42..b6a0eb93a13f 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -4,87 +4,94 @@
 @import '../core/style/layout-common';
 @import '../../cdk/a11y/a11y';
 
-.mat-button, .mat-icon-button {
-  .mat-button-focus-overlay {
-    opacity: 0;
-  }
+.mat-button,
+.mat-icon-button {
+    .mat-button-focus-overlay {
+        opacity: 0;
+    }
 }
 
 // Only flat and stroked buttons (not raised, FABs or icon buttons) have a hover style.
 // Use the same visual treatment for hover as for focus.
 .mat-button:hover,
 .mat-stroked-button:hover {
-  .mat-button-focus-overlay {
-    opacity: 0.04;
-  }
+    .mat-button-focus-overlay {
+        opacity: 0.04;
+    }
 }
 
 // Disable the hover styles on non-hover devices. Since this is more of a progressive
 // enhancement and not all desktop browsers support this kind of media query, we can't
 // use something like `@media (hover)`.
 @media (hover: none) {
-  .mat-button:hover,
-  .mat-stroked-button:hover {
-    .mat-button-focus-overlay {
-      opacity: 0;
+
+    .mat-button:hover,
+    .mat-stroked-button:hover {
+        .mat-button-focus-overlay {
+            opacity: 0;
+        }
     }
-  }
 }
 
 // Should be placed after the `:hover` styles so the focused
 // styling coming in from `mat-button-base` takes precedence.
-.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
-  @include mat-button-base;
+.mat-button,
+.mat-icon-button,
+.mat-stroked-button,
+.mat-flat-button {
+    @include mat-button-base;
 }
 
 .mat-raised-button {
-  @include mat-raised-button;
+    @include mat-raised-button;
 }
 
 .mat-stroked-button {
-  border: $mat-stroked-button-border-width solid currentColor;
-  padding: $mat-stroked-button-padding;
-  line-height: $mat-stroked-button-line-height;
-
-  // Since the stroked button has has an actual border that reduces the available space for
-  // child elements such as the ripple container or focus overlay, an inherited border radius
-  // for the absolute-positioned child elements does not work properly. This is because the
-  // child element cannot expand to the same boundaries as the parent element with a border.
-  // In order to work around this issue by *not* hiding overflow, we adjust the child elements
-  // to fully cover the actual button element. This means that the border-radius would be correct
-  // then. See: https://github.com/angular/material2/issues/13738
-  .mat-button-ripple.mat-ripple, .mat-button-focus-overlay {
-    top: -$mat-stroked-button-border-width;
-    left: -$mat-stroked-button-border-width;
-    right: -$mat-stroked-button-border-width;
-    bottom: -$mat-stroked-button-border-width;
-  }
+    border: $mat-stroked-button-border-width solid currentColor;
+    padding: $mat-stroked-button-padding;
+    line-height: $mat-stroked-button-line-height;
+
+    // Since the stroked button has has an actual border that reduces the available space for
+    // child elements such as the ripple container or focus overlay, an inherited border radius
+    // for the absolute-positioned child elements does not work properly. This is because the
+    // child element cannot expand to the same boundaries as the parent element with a border.
+    // In order to work around this issue by *not* hiding overflow, we adjust the child elements
+    // to fully cover the actual button element. This means that the border-radius would be correct
+    // then. See: https://github.com/angular/material2/issues/13738
+    .mat-button-ripple.mat-ripple,
+    .mat-button-focus-overlay {
+        top: -$mat-stroked-button-border-width;
+        left: -$mat-stroked-button-border-width;
+        right: -$mat-stroked-button-border-width;
+        bottom: -$mat-stroked-button-border-width;
+    }
 }
 
 .mat-fab {
-  @include mat-fab($mat-fab-size, $mat-fab-padding);
+    @include mat-fab($mat-fab-size, $mat-fab-padding);
 }
 
 .mat-mini-fab {
-  @include mat-fab($mat-mini-fab-size, $mat-mini-fab-padding);
+    @include mat-fab($mat-mini-fab-size, $mat-mini-fab-padding);
 }
 
 .mat-icon-button {
-  padding: 0;
+    padding: 0;
 
-  // Reset the min-width from the button base.
-  min-width: 0;
+    // Reset the min-width from the button base.
+    min-width: 0;
 
-  width: $mat-icon-button-size;
-  height: $mat-icon-button-size;
+    width: $mat-icon-button-size;
+    height: $mat-icon-button-size;
 
-  flex-shrink: 0;
-  line-height: $mat-icon-button-size;
-  border-radius: $mat-icon-button-border-radius;
+    flex-shrink: 0;
+    line-height: $mat-icon-button-size;
+    border-radius: $mat-icon-button-border-radius;
 
-  i, .mat-icon {
-    line-height: $mat-icon-button-line-height;
-  }
+    i,
+    .mat-icon {
+        line-height: $mat-icon-button-line-height;
+    }
 }
 
 // The ripple container and focus overlay should match the bounds of the entire button.
@@ -92,77 +99,153 @@
 // the `mat-core` mixin and can potentially overwrite the absolute position of the container.
 .mat-button-ripple.mat-ripple,
 .mat-button-focus-overlay {
-  @include mat-fill;
-
-  // Disable pointer events for the ripple container and focus overlay because the container
-  // will overlay the user content and we don't want to disable mouse events on the user content.
-  // Pointer events can be safely disabled because the ripple trigger element is the host element.
-  pointer-events: none;
-
-  // Inherit the border radius from the parent so that focus overlay and ripples don't exceed the
-  // parent button boundaries. Note that an inherited border radius does not work properly if
-  // the actual button element does have a border because it causes the inner content to be
-  // smaller. We have special logic for stroked buttons to handle this scenario.
-  border-radius: inherit;
+    @include mat-fill;
+
+    // Disable pointer events for the ripple container and focus overlay because the container
+    // will overlay the user content and we don't want to disable mouse events on the user content.
+    // Pointer events can be safely disabled because the ripple trigger element is the host element.
+    pointer-events: none;
+
+    // Inherit the border radius from the parent so that focus overlay and ripples don't exceed the
+    // parent button boundaries. Note that an inherited border radius does not work properly if
+    // the actual button element does have a border because it causes the inner content to be
+    // smaller. We have special logic for stroked buttons to handle this scenario.
+    border-radius: inherit;
 }
 
 // Element that overlays the button to show focus and hover effects.
 .mat-button-focus-overlay {
-  opacity: 0;
-  transition: $mat-button-focus-transition;
-
-  ._mat-animation-noopable & {
-    transition: none;
-  }
-
-  @include cdk-high-contrast {
-    // Note that IE will render this in the same way, no
-    // matter whether the theme is light or dark. This helps
-    // with the readability of focused buttons.
-    background-color: #fff;
-  }
-
-  @include cdk-high-contrast(black-on-white) {
-    // For the black-on-white high contrast mode, the browser will set this element
-    // to white, making it blend in with the background, hence why we need to set
-    // it explicitly to black.
-    background-color: #000;
-  }
+    opacity: 0;
+    transition: $mat-button-focus-transition;
+
+    ._mat-animation-noopable & {
+        transition: none;
+    }
+
+    @include cdk-high-contrast {
+        // Note that IE will render this in the same way, no
+        // matter whether the theme is light or dark. This helps
+        // with the readability of focused buttons.
+        background-color: #fff;
+    }
+
+    @include cdk-high-contrast(black-on-white) {
+        // For the black-on-white high contrast mode, the browser will set this element
+        // to white, making it blend in with the background, hence why we need to set
+        // it explicitly to black.
+        background-color: #000;
+    }
 }
 
 // For round buttons, the ripple container should clip child ripples to a circle.
 .mat-button-ripple-round {
-  border-radius: 50%;
-  // z-index needed to make clipping to border-radius work correctly.
-  // http://stackoverflow.com/questions/20001515/
-  z-index: 1;
+    border-radius: 50%;
+    // z-index needed to make clipping to border-radius work correctly.
+    // http://stackoverflow.com/questions/20001515/
+    z-index: 1;
 }
 
 // Elements inside of all type of buttons should be vertical aligned in the middle.
-.mat-button, .mat-flat-button, .mat-stroked-button, .mat-raised-button, .mat-icon-button,
-.mat-fab, .mat-mini-fab {
-  .mat-button-wrapper > * {
-    vertical-align: middle;
-  }
+.mat-button,
+.mat-flat-button,
+.mat-stroked-button,
+.mat-raised-button,
+.mat-icon-button,
+.mat-fab,
+.mat-mini-fab {
+    .mat-button-wrapper>* {
+        vertical-align: middle;
+    }
 }
 
 // Align icon-buttons correctly inside of standard, fill, and outline form-field appearances.
 .mat-form-field:not(.mat-form-field-appearance-legacy) {
-  .mat-form-field-prefix,
-  .mat-form-field-suffix {
-    .mat-icon-button {
-      display: block;
-      font-size: inherit;
-      width: 2.5em;
-      height: 2.5em;
+
+    .mat-form-field-prefix,
+    .mat-form-field-suffix {
+        .mat-icon-button {
+            display: block;
+            font-size: inherit;
+            width: 2.5em;
+            height: 2.5em;
+        }
     }
-  }
 }
 
 // Add an outline to make buttons more visible in high contrast mode. Stroked buttons
 // don't need a special look in high-contrast mode, because those already have an outline.
 @include cdk-high-contrast {
-  .mat-button, .mat-flat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
-    outline: solid 1px;
-  }
+
+    .mat-button,
+    .mat-flat-button,
+    .mat-raised-button,
+    .mat-icon-button,
+    .mat-fab,
+    .mat-mini-fab {
+        outline: solid 1px;
+    }
 }
+
+mat-fab-dial,
+[mat-fab-dial],
+mat-mini-fab-dial,
+[mat-mini-fab-dial] {
+
+    outline: none;
+    position: fixed;
+    z-index: $z-index-drawer;
+    display: inline-flex;
+    flex-wrap: nowrap;
+
+    &[placement='top'] {
+        top: $mat-fab-dial-margin;
+        left: $mat-fab-dial-margin;
+    }
+
+    &[placement='bottom'] {
+        bottom: $mat-fab-dial-margin;
+        right: $mat-fab-dial-margin;
+    }
+
+    &[direction='horizontal'] {
+        &[placement='top'] {
+            flex-direction: row;
+
+            & mat-fab-dial-list {
+                display: inline-flex;
+                flex-direction: row;
+            }
+        }
+
+        &[placement='bottom'] {
+            flex-direction: row-reverse;
+
+            & mat-fab-dial-list {
+                display: inline-flex;
+                flex-direction: row-reverse;
+            }
+        }
+    }
+
+    &[direction='vertical'] {
+        &[placement='top'] {
+            flex-direction: column;
+
+            & mat-fab-dial-list {
+                display: inline-flex;
+                flex-direction: column;
+            }
+        }
+
+        &[placement='bottom'] {
+            flex-direction: column-reverse;
+
+            & mat-fab-dial-list {
+                display: inline-flex;
+                flex-direction: column-reverse;
+            }
+        }
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts
index 8b4fcb260b45..d9312f24c5d3 100644
--- a/src/lib/button/button.ts
+++ b/src/lib/button/button.ts
@@ -10,21 +10,22 @@ import {FocusMonitor} from '@angular/cdk/a11y';
 import {Platform} from '@angular/cdk/platform';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
-  OnDestroy,
-  ViewChild,
-  ViewEncapsulation,
-  Optional,
   Inject,
   Input,
+  OnDestroy,
+  Optional,
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import {
   CanColor,
-  CanDisable,
-  CanDisableRipple,
   CanColorCtor,
+  CanDisable,
   CanDisableCtor,
+  CanDisableRipple,
   CanDisableRippleCtor,
   MatRipple,
   mixinColor,
@@ -41,13 +42,8 @@ const DEFAULT_ROUND_BUTTON_COLOR = 'accent';
  * style as different variants.
  */
 const BUTTON_HOST_ATTRIBUTES = [
-  'mat-button',
-  'mat-flat-button',
-  'mat-icon-button',
-  'mat-raised-button',
-  'mat-stroked-button',
-  'mat-mini-fab',
-  'mat-fab',
+  'mat-button', 'mat-flat-button', 'mat-icon-button', 'mat-raised-button', 'mat-stroked-button',
+  'mat-mini-fab', 'mat-fab', 'mat-fab-dial', 'mat-mini-fab-dial'
 ];
 
 // Boilerplate for applying mixins to MatButton.
@@ -56,9 +52,8 @@ export class MatButtonBase {
   constructor(public _elementRef: ElementRef) {}
 }
 
-export const _MatButtonMixinBase:
-    CanDisableRippleCtor & CanDisableCtor & CanColorCtor & typeof MatButtonBase =
-        mixinColor(mixinDisabled(mixinDisableRipple(MatButtonBase)));
+export const _MatButtonMixinBase: CanDisableRippleCtor&CanDisableCtor&CanColorCtor&
+    typeof MatButtonBase = mixinColor(mixinDisabled(mixinDisableRipple(MatButtonBase)));
 
 /**
  * Material design button.
@@ -79,9 +74,8 @@ export const _MatButtonMixinBase:
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatButton extends _MatButtonMixinBase
-    implements OnDestroy, CanDisable, CanColor, CanDisableRipple {
-
+export class MatButton extends _MatButtonMixinBase implements OnDestroy, CanDisable, CanColor,
+                                                              CanDisableRipple {
   /** Whether the button is round. */
   readonly isRoundButton: boolean = this._hasHostAttributes('mat-fab', 'mat-mini-fab');
 
@@ -91,15 +85,15 @@ export class MatButton extends _MatButtonMixinBase
   /** Reference to the MatRipple instance of the button. */
   @ViewChild(MatRipple) ripple: MatRipple;
 
-  constructor(elementRef: ElementRef,
-              /**
-               * @deprecated Platform checks for SSR are no longer needed
-               * @breaking-change 8.0.0
-               */
-              _platform: Platform,
-              private _focusMonitor: FocusMonitor,
-              // @breaking-change 8.0.0 `_animationMode` parameter to be made required.
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
+  constructor(
+      elementRef: ElementRef,
+      /**
+       * @deprecated Platform checks for SSR are no longer needed
+       * @breaking-change 8.0.0
+       */
+      _platform: Platform, private _focusMonitor: FocusMonitor,
+      // @breaking-change 8.0.0 `_animationMode` parameter to be made required.
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super(elementRef);
 
     // For each of the variant selectors that is prevent in the button's host
@@ -155,7 +149,6 @@ export class MatButton extends _MatButtonMixinBase
     '[attr.tabindex]': 'disabled ? -1 : (tabIndex || 0)',
     '[attr.disabled]': 'disabled || null',
     '[attr.aria-disabled]': 'disabled.toString()',
-    '(click)': '_haltDisabledEvents($event)',
     '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
   },
   inputs: ['disabled', 'disableRipple', 'color'],
@@ -169,11 +162,9 @@ export class MatAnchor extends MatButton {
   @Input() tabIndex: number;
 
   constructor(
-    platform: Platform,
-    focusMonitor: FocusMonitor,
-    elementRef: ElementRef,
-    // @breaking-change 8.0.0 `animationMode` parameter to be made required.
-    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
+      platform: Platform, focusMonitor: FocusMonitor, elementRef: ElementRef,
+      // @breaking-change 8.0.0 `animationMode` parameter to be made required.
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(elementRef, platform, focusMonitor, animationMode);
   }
 
@@ -185,3 +176,97 @@ export class MatAnchor extends MatButton {
     }
   }
 }
+
+
+// Boilerplate for applying mixins to MatButton.
+/** @docs-private */
+export class MatDialBase {
+  constructor(public _elementRef: ElementRef, protected _changeDetectorRef: ChangeDetectorRef) {}
+}
+
+export const _MatDialMixinBase: CanDisableRippleCtor&CanDisableCtor&CanColorCtor&
+    typeof MatDialBase = mixinColor(mixinDisabled(mixinDisableRipple(MatDialBase)));
+/**
+ * Material design dial button.
+ */
+@Component({
+  moduleId: module.id,
+  selector: `button[mat-fab-dial], button[mat-mini-fab-dial], mat-fab-dial, mat-mini-fab-dial`,
+  exportAs: 'matDialButton',
+  host: {'[attr.tabindex]': '-1', '[attr.aria-disabled]': 'disabled.toString()'},
+  inputs: ['disabled', 'disableRipple', 'color', 'open', 'icon', 'direction'],
+  template: `<button mat-fab
+     (click)="_toggleDial()"
+     [disabled]="disabled"
+     [tabIndex]="tabIndex"
+     [color]="color">
+      <mat-icon *ngIf="!open; else ngMatDialButtonClose">{{icon}}</mat-icon>
+      <ng-template #ngMatDialButtonClose>
+        <mat-icon>close</mat-icon>
+      </ng-template>
+    </button>
+    <mat-fab-dial-list *ngIf="open">
+      <ng-content></ng-content>
+    </mat-fab-dial-list>`,
+  styleUrls: ['button.css'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatDialButton extends _MatDialMixinBase implements CanDisable, CanColor,
+                                                                CanDisableRipple {
+  /** Tabindex of the button. */
+  @Input() tabIndex: number;
+
+  @Input()
+  get open(): boolean {
+    return this._open;
+  }
+  set open(value: boolean) {
+    this._open = value;
+  }
+  _open: boolean;
+
+  @Input()
+  get icon(): string {
+    return this._icon;
+  }
+  set icon(value: string) {
+    this._icon = value || 'add';
+  }
+  _icon: string = 'add';
+
+  @Input()
+  get direction(): 'vertical'|'horizontal' {
+    return this._direction;
+  }
+  set direction(value: 'vertical'|'horizontal') {
+    this._direction = value || 'vertical';
+  }
+  _direction: 'vertical'|'horizontal';
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) {
+    super(elementRef, changeDetectorRef);
+  }
+
+  _toggleDial(): void {
+    if (this.disabled) {
+      return;
+    }
+    this.open = !this.open;
+  }
+}
+
+/**
+ * Material design action button list.
+ */
+@Component({
+  moduleId: module.id,
+  selector: 'mat-fab-dial-list',
+  template: `<ng-content select="[mat-fab], [mat-mini-fab]"></ng-content>`,
+  exportAs: 'matFabDialList',
+  styleUrls: ['button.css'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatFabDialList {
+}
diff --git a/src/material-examples/button-types/button-types-example.html b/src/material-examples/button-types/button-types-example.html
index 829fd13f94d7..c07bbf640345 100644
--- a/src/material-examples/button-types/button-types-example.html
+++ b/src/material-examples/button-types/button-types-example.html
@@ -82,3 +82,14 @@ <h3>Mini Fab Buttons</h3>
   </button>
   <a mat-mini-fab routerLink=".">Link</a>
 </div>
+
+
+<h3>Speed Dial Fab Button</h3>
+<div class="example-button-row">
+  <mat-fab-dial>
+    <button mat-mini-fab>Sub-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>
+  </mat-fab-dial>
+</div>
\ No newline at end of file