From c479faad6c23caf572c454d143d94a6dbed9397e Mon Sep 17 00:00:00 2001
From: Austin <amcdaniel2@gmail.com>
Date: Thu, 13 Jul 2017 12:22:56 -0500
Subject: [PATCH] docs(demos): add a variety of button demos (#5628)

---
 .../button-types/button-types-example.css     |  4 -
 .../button-types/button-types-example.html    | 79 +++++++++++++++----
 2 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/src/material-examples/button-types/button-types-example.css b/src/material-examples/button-types/button-types-example.css
index b0b34952fcc..9771bda678b 100644
--- a/src/material-examples/button-types/button-types-example.css
+++ b/src/material-examples/button-types/button-types-example.css
@@ -1,7 +1,3 @@
-.example-container {
-  width: 500px;
-}
-
 .example-button-row {
   display: flex;
   align-items: center;
diff --git a/src/material-examples/button-types/button-types-example.html b/src/material-examples/button-types/button-types-example.html
index 4c5783de9c7..1a9b5b2015a 100644
--- a/src/material-examples/button-types/button-types-example.html
+++ b/src/material-examples/button-types/button-types-example.html
@@ -1,17 +1,64 @@
-<div class="example-container">
-  <h3>Normal Buttons</h3>
-  <div class="button-row">
-    <button md-button>Flat button</button>
-    <button md-raised-button>Raised button</button>
-    <button md-fab><md-icon>check</md-icon></button>
-    <button md-mini-fab><md-icon>check</md-icon></button>
-  </div>
-
-  <h3>Link Buttons</h3>
-  <div class="example-button-row">
-    <a md-button routerLink=".">Flat button</a>
-    <a md-raised-button routerLink=".">Raised button</a>
-    <a md-fab routerLink="."><md-icon>check</md-icon></a>
-    <a md-mini-fab routerLink="."><md-icon>check</md-icon></a>
-  </div>
+<h3>Basic Buttons</h3>
+<div class="button-row">
+  <button md-button>Basic</button>
+  <button md-button color="primary">Primary</button>
+  <button md-button color="accent">Accent</button>
+  <button md-button color="warn">Warn</button>
+  <button md-button disabled>Disabled</button>
+  <a md-button routerLink=".">Link</a>
+</div>
+
+<h3>Raised Buttons</h3>
+<div class="button-row">
+  <button md-raised-button>Basic</button>
+  <button md-raised-button color="primary">Primary</button>
+  <button md-raised-button color="accent">Accent</button>
+  <button md-raised-button color="warn">Warn</button>
+  <button md-raised-button disabled>Disabled</button>
+  <a md-raised-button routerLink=".">Link</a>
+</div>
+
+<h3>Icon Buttons</h3>
+<div class="button-row">
+  <button md-icon-button>
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <button md-icon-button color="primary">
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <button md-icon-button color="accent">
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <button md-icon-button color="warn">
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <button md-icon-button disabled>
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+</div>
+
+<h3>Fab Buttons</h3>
+<div class="button-row">
+  <button md-fab>Basic</button>
+  <button md-fab color="primary">Primary</button>
+  <button md-fab color="accent">Accent</button>
+  <button md-fab color="warn">Warn</button>
+  <button md-fab disabled>Disabled</button>
+  <button md-fab>
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <a md-fab routerLink=".">Link</a>
+</div>
+
+<h3>Mini Fab Buttons</h3>
+<div class="button-row">
+  <button md-mini-fab>Basic</button>
+  <button md-mini-fab color="primary">Primary</button>
+  <button md-mini-fab color="accent">Accent</button>
+  <button md-mini-fab color="warn">Warn</button>
+  <button md-mini-fab disabled>Disabled</button>
+  <button md-mini-fab>
+    <md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
+  </button>
+  <a md-mini-fab routerLink=".">Link</a>
 </div>