From b4331834ae0f5632a6dc82d9af60565a9b1af655 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 16 Aug 2017 09:25:54 -0400
Subject: [PATCH] Add button mockups

---
 docs/source/buttons.md | 87 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)

diff --git a/docs/source/buttons.md b/docs/source/buttons.md
index 4c4fbbbeb..a588ee606 100644
--- a/docs/source/buttons.md
+++ b/docs/source/buttons.md
@@ -4,3 +4,90 @@ title: "Buttons"
 ---
 
 # Buttons
+
+<div class="mb-4">
+    <button class="text-medium text-dark rounded py-2 px-4 bg-light mr-4">
+        Save
+    </button>
+    <button class="text-medium text-dark rounded py-2 px-4 bg-light-soft mr-4">
+        Save
+    </button>
+    <button class="text-medium text-dark rounded py-2 px-4 bg-light-softer mr-4">
+        Save
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-dark-softer mr-4">
+        Save
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-red mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-red-light mr-4">
+        Save
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-amber mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-amber-light mr-4">
+        Save
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-green mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-green-light mr-4">
+        Save
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-teal mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-teal-light mr-4">
+        Save
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-blue mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-blue-light mr-4">
+        Save
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-indigo mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-indigo-light mr-4">
+        Save
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-purple mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-purple-light mr-4">
+        Save
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-pink mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-pink-light mr-4">
+        Save
+    </button>
+</div>