From 5fc8bfe78456ddf52a198a90b0778c850dadbfc0 Mon Sep 17 00:00:00 2001
From: Jason Basuil <basuilj@gmail.com>
Date: Thu, 16 Mar 2023 12:23:42 -0700
Subject: [PATCH] Button height and typography updates (#849)

---
 spec/__snapshots__/Storyshots.test.js.snap | 860 +++++++++++++++++----
 src/Button/Button.jsx                      |  10 +
 src/Button/Button.scss                     |  13 +-
 src/Button/Buttons.stories.jsx             | 132 ++++
 src/Button/index.js                        |   4 +-
 src/index.js                               |   3 +-
 6 files changed, 867 insertions(+), 155 deletions(-)

diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
index ed175122..25cf6f7b 100644
--- a/spec/__snapshots__/Storyshots.test.js.snap
+++ b/spec/__snapshots__/Storyshots.test.js.snap
@@ -3497,6 +3497,133 @@ exports[`Storyshots Components/Button Danger 1`] = `
       />
     </svg>
   </button>
+   
+  <button
+    className="Button btn btn-danger btn-lg"
+    disabled={false}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 384 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Delete
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </button>
+   
+  <button
+    className="Button btn btn-outline-danger btn-lg"
+    disabled={false}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 384 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Delete
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </button>
+   
+  <button
+    aria-disabled={true}
+    className="Button btn btn-danger btn-lg"
+    disabled={true}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 384 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Delete
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </button>
 </div>
 `;
 
@@ -3517,156 +3644,599 @@ exports[`Storyshots Components/Button Link 1`] = `
   </button>
    
   <button
-    className="Button btn btn-link btn-sm"
+    className="Button btn btn-link btn-sm"
+    disabled={false}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-paper-plane icon-left"
+      data-icon="paper-plane"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Send
+  </button>
+   
+  <button
+    aria-disabled={true}
+    className="Button btn btn-link btn-sm"
+    disabled={true}
+    type="button"
+  >
+    Send
+  </button>
+</div>
+`;
+
+exports[`Storyshots Components/Button Loading 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <button
+    aria-disabled={true}
+    className="Button btn btn-primary btn-sm"
+    disabled={true}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
+      data-icon="spinner-third"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Loading...
+  </button>
+   
+  <button
+    aria-disabled={true}
+    className="Button btn btn-outline-primary btn-sm"
+    disabled={true}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
+      data-icon="spinner-third"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Loading...
+  </button>
+   
+  <button
+    aria-disabled={true}
+    className="Button btn btn-primary btn-md"
+    disabled={true}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
+      data-icon="spinner-third"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Loading...
+  </button>
+   
+  <button
+    aria-disabled={true}
+    className="Button btn btn-outline-primary btn-md"
+    disabled={true}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
+      data-icon="spinner-third"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Loading...
+  </button>
+   
+  <button
+    aria-disabled={true}
+    className="Button btn btn-primary btn-lg"
+    disabled={true}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
+      data-icon="spinner-third"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Loading...
+  </button>
+   
+  <button
+    aria-disabled={true}
+    className="Button btn btn-outline-primary btn-lg"
+    disabled={true}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
+      data-icon="spinner-third"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Loading...
+  </button>
+</div>
+`;
+
+exports[`Storyshots Components/Button Primary 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <button
+    className="Button btn btn-primary btn-sm"
+    disabled={false}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 384 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Confirm
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </button>
+   
+  <button
+    className="Button btn btn-outline-primary btn-sm"
+    disabled={false}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 384 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Confirm
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </button>
+   
+  <button
+    aria-disabled={true}
+    className="Button btn btn-primary btn-sm"
+    disabled={true}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 384 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Confirm
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </button>
+   
+  <button
+    className="Button btn btn-primary btn-md"
+    disabled={false}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 384 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Confirm
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </button>
+   
+  <button
+    className="Button btn btn-outline-primary btn-md"
     disabled={false}
     type="button"
   >
     <svg
       aria-hidden="true"
-      className="svg-inline--fa fa-paper-plane icon-left"
-      data-icon="paper-plane"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
       data-prefix="far"
       focusable="false"
       role="img"
       style={Object {}}
-      viewBox="0 0 512 512"
+      viewBox="0 0 384 512"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Confirm
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
         fill="currentColor"
         style={Object {}}
       />
     </svg>
-    Send
   </button>
    
   <button
     aria-disabled={true}
-    className="Button btn btn-link btn-sm"
-    disabled={true}
-    type="button"
-  >
-    Send
-  </button>
-</div>
-`;
-
-exports[`Storyshots Components/Button Loading 1`] = `
-<div
-  style={
-    Object {
-      "padding": "1rem",
-    }
-  }
->
-  <button
-    aria-disabled={true}
-    className="Button btn btn-primary btn-sm"
+    className="Button btn btn-primary btn-md"
     disabled={true}
     type="button"
   >
     <svg
       aria-hidden="true"
-      className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
-      data-icon="spinner-third"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
       data-prefix="far"
       focusable="false"
       role="img"
       style={Object {}}
-      viewBox="0 0 512 512"
+      viewBox="0 0 384 512"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Confirm
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
         fill="currentColor"
         style={Object {}}
       />
     </svg>
-    Loading...
   </button>
    
   <button
-    aria-disabled={true}
-    className="Button btn btn-outline-primary btn-sm"
-    disabled={true}
+    className="Button btn btn-primary btn-lg"
+    disabled={false}
     type="button"
   >
     <svg
       aria-hidden="true"
-      className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
-      data-icon="spinner-third"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
       data-prefix="far"
       focusable="false"
       role="img"
       style={Object {}}
-      viewBox="0 0 512 512"
+      viewBox="0 0 384 512"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Confirm
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
         fill="currentColor"
         style={Object {}}
       />
     </svg>
-    Loading...
   </button>
    
   <button
-    aria-disabled={true}
-    className="Button btn btn-primary btn-md"
-    disabled={true}
+    className="Button btn btn-outline-primary btn-lg"
+    disabled={false}
     type="button"
   >
     <svg
       aria-hidden="true"
-      className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
-      data-icon="spinner-third"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
       data-prefix="far"
       focusable="false"
       role="img"
       style={Object {}}
-      viewBox="0 0 512 512"
+      viewBox="0 0 384 512"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Confirm
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
         fill="currentColor"
         style={Object {}}
       />
     </svg>
-    Loading...
   </button>
    
   <button
     aria-disabled={true}
-    className="Button btn btn-outline-primary btn-md"
+    className="Button btn btn-primary btn-lg"
     disabled={true}
     type="button"
   >
     <svg
       aria-hidden="true"
-      className="svg-inline--fa fa-spinner-third icon-left btn-loading-spin"
-      data-icon="spinner-third"
+      className="svg-inline--fa fa-file-alt icon-left"
+      data-icon="file-alt"
       data-prefix="far"
       focusable="false"
       role="img"
       style={Object {}}
-      viewBox="0 0 512 512"
+      viewBox="0 0 384 512"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z"
+        d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+    Confirm
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-caret-down icon-right"
+      data-icon="caret-down"
+      data-prefix="far"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M272 160H48.1c-42.6 0-64.2 51.7-33.9 81.9l111.9 112c18.7 18.7 49.1 18.7 67.9 0l112-112c30-30.1 8.7-81.9-34-81.9zM160 320L48 208h224L160 320z"
         fill="currentColor"
         style={Object {}}
       />
     </svg>
-    Loading...
   </button>
 </div>
 `;
 
-exports[`Storyshots Components/Button Primary 1`] = `
+exports[`Storyshots Components/Button Transparent 1`] = `
 <div
   style={
     Object {
@@ -3675,7 +4245,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
   }
 >
   <button
-    className="Button btn btn-primary btn-sm"
+    className="Button btn btn-transparent btn-sm"
     disabled={false}
     type="button"
   >
@@ -3696,7 +4266,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
         style={Object {}}
       />
     </svg>
-    Confirm
+    Skip
     <svg
       aria-hidden="true"
       className="svg-inline--fa fa-caret-down icon-right"
@@ -3717,7 +4287,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
   </button>
    
   <button
-    className="Button btn btn-outline-primary btn-sm"
+    className="Button btn btn-outline-transparent btn-sm"
     disabled={false}
     type="button"
   >
@@ -3738,7 +4308,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
         style={Object {}}
       />
     </svg>
-    Confirm
+    Skip
     <svg
       aria-hidden="true"
       className="svg-inline--fa fa-caret-down icon-right"
@@ -3760,7 +4330,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
    
   <button
     aria-disabled={true}
-    className="Button btn btn-primary btn-sm"
+    className="Button btn btn-transparent btn-sm"
     disabled={true}
     type="button"
   >
@@ -3781,7 +4351,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
         style={Object {}}
       />
     </svg>
-    Confirm
+    Skip
     <svg
       aria-hidden="true"
       className="svg-inline--fa fa-caret-down icon-right"
@@ -3802,7 +4372,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
   </button>
    
   <button
-    className="Button btn btn-primary btn-md"
+    className="Button btn btn-transparent btn-md"
     disabled={false}
     type="button"
   >
@@ -3823,7 +4393,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
         style={Object {}}
       />
     </svg>
-    Confirm
+    Skip
     <svg
       aria-hidden="true"
       className="svg-inline--fa fa-caret-down icon-right"
@@ -3844,7 +4414,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
   </button>
    
   <button
-    className="Button btn btn-outline-primary btn-md"
+    className="Button btn btn-outline-transparent btn-md"
     disabled={false}
     type="button"
   >
@@ -3865,7 +4435,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
         style={Object {}}
       />
     </svg>
-    Confirm
+    Skip
     <svg
       aria-hidden="true"
       className="svg-inline--fa fa-caret-down icon-right"
@@ -3887,7 +4457,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
    
   <button
     aria-disabled={true}
-    className="Button btn btn-primary btn-md"
+    className="Button btn btn-transparent btn-md"
     disabled={true}
     type="button"
   >
@@ -3908,7 +4478,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
         style={Object {}}
       />
     </svg>
-    Confirm
+    Skip
     <svg
       aria-hidden="true"
       className="svg-inline--fa fa-caret-down icon-right"
@@ -3927,19 +4497,9 @@ exports[`Storyshots Components/Button Primary 1`] = `
       />
     </svg>
   </button>
-</div>
-`;
-
-exports[`Storyshots Components/Button Transparent 1`] = `
-<div
-  style={
-    Object {
-      "padding": "1rem",
-    }
-  }
->
+   
   <button
-    className="Button btn btn-transparent btn-sm"
+    className="Button btn btn-transparent btn-lg"
     disabled={false}
     type="button"
   >
@@ -3981,7 +4541,7 @@ exports[`Storyshots Components/Button Transparent 1`] = `
   </button>
    
   <button
-    className="Button btn btn-outline-transparent btn-sm"
+    className="Button btn btn-outline-transparent btn-lg"
     disabled={false}
     type="button"
   >
@@ -4024,7 +4584,7 @@ exports[`Storyshots Components/Button Transparent 1`] = `
    
   <button
     aria-disabled={true}
-    className="Button btn btn-transparent btn-sm"
+    className="Button btn btn-transparent btn-lg"
     disabled={true}
     type="button"
   >
@@ -4064,9 +4624,19 @@ exports[`Storyshots Components/Button Transparent 1`] = `
       />
     </svg>
   </button>
-   
+</div>
+`;
+
+exports[`Storyshots Components/Button Warning 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
   <button
-    className="Button btn btn-transparent btn-md"
+    className="Button btn btn-warning btn-sm"
     disabled={false}
     type="button"
   >
@@ -4087,7 +4657,7 @@ exports[`Storyshots Components/Button Transparent 1`] = `
         style={Object {}}
       />
     </svg>
-    Skip
+    Edit
     <svg
       aria-hidden="true"
       className="svg-inline--fa fa-caret-down icon-right"
@@ -4108,7 +4678,7 @@ exports[`Storyshots Components/Button Transparent 1`] = `
   </button>
    
   <button
-    className="Button btn btn-outline-transparent btn-md"
+    className="Button btn btn-outline-warning btn-sm"
     disabled={false}
     type="button"
   >
@@ -4129,7 +4699,7 @@ exports[`Storyshots Components/Button Transparent 1`] = `
         style={Object {}}
       />
     </svg>
-    Skip
+    Edit
     <svg
       aria-hidden="true"
       className="svg-inline--fa fa-caret-down icon-right"
@@ -4151,7 +4721,7 @@ exports[`Storyshots Components/Button Transparent 1`] = `
    
   <button
     aria-disabled={true}
-    className="Button btn btn-transparent btn-md"
+    className="Button btn btn-warning btn-sm"
     disabled={true}
     type="button"
   >
@@ -4172,7 +4742,7 @@ exports[`Storyshots Components/Button Transparent 1`] = `
         style={Object {}}
       />
     </svg>
-    Skip
+    Edit
     <svg
       aria-hidden="true"
       className="svg-inline--fa fa-caret-down icon-right"
@@ -4191,19 +4761,9 @@ exports[`Storyshots Components/Button Transparent 1`] = `
       />
     </svg>
   </button>
-</div>
-`;
-
-exports[`Storyshots Components/Button Warning 1`] = `
-<div
-  style={
-    Object {
-      "padding": "1rem",
-    }
-  }
->
+   
   <button
-    className="Button btn btn-warning btn-sm"
+    className="Button btn btn-warning btn-md"
     disabled={false}
     type="button"
   >
@@ -4245,7 +4805,7 @@ exports[`Storyshots Components/Button Warning 1`] = `
   </button>
    
   <button
-    className="Button btn btn-outline-warning btn-sm"
+    className="Button btn btn-outline-warning btn-md"
     disabled={false}
     type="button"
   >
@@ -4288,7 +4848,7 @@ exports[`Storyshots Components/Button Warning 1`] = `
    
   <button
     aria-disabled={true}
-    className="Button btn btn-warning btn-sm"
+    className="Button btn btn-warning btn-md"
     disabled={true}
     type="button"
   >
@@ -4330,7 +4890,7 @@ exports[`Storyshots Components/Button Warning 1`] = `
   </button>
    
   <button
-    className="Button btn btn-warning btn-md"
+    className="Button btn btn-warning btn-lg"
     disabled={false}
     type="button"
   >
@@ -4372,7 +4932,7 @@ exports[`Storyshots Components/Button Warning 1`] = `
   </button>
    
   <button
-    className="Button btn btn-outline-warning btn-md"
+    className="Button btn btn-outline-warning btn-lg"
     disabled={false}
     type="button"
   >
@@ -4415,7 +4975,7 @@ exports[`Storyshots Components/Button Warning 1`] = `
    
   <button
     aria-disabled={true}
-    className="Button btn btn-warning btn-md"
+    className="Button btn btn-warning btn-lg"
     disabled={true}
     type="button"
   >
@@ -5618,7 +6178,7 @@ exports[`Storyshots Components/Form Default 1`] = `
       </label>
     </div>
     <button
-      className="Button btn btn-primary"
+      className="Button btn btn-primary btn-md"
       disabled={false}
       type="submit"
     >
@@ -8376,7 +8936,7 @@ exports[`Storyshots Components/Modal Danger Modal 1`] = `
         className="ModalFooter"
       >
         <button
-          className="Button btn btn-transparent"
+          className="Button btn btn-transparent btn-md"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -8384,7 +8944,7 @@ exports[`Storyshots Components/Modal Danger Modal 1`] = `
           Cancel
         </button>
         <button
-          className="Button btn btn-danger"
+          className="Button btn btn-danger btn-md"
           disabled={false}
           type="button"
         >
@@ -8463,7 +9023,7 @@ exports[`Storyshots Components/Modal Default 1`] = `
         className="ModalFooter"
       >
         <button
-          className="Button btn btn-transparent"
+          className="Button btn btn-transparent btn-md"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -8471,7 +9031,7 @@ exports[`Storyshots Components/Modal Default 1`] = `
           Cancel
         </button>
         <button
-          className="Button btn btn-primary"
+          className="Button btn btn-primary btn-md"
           disabled={false}
           type="submit"
         >
@@ -8550,7 +9110,7 @@ exports[`Storyshots Components/Modal Large Modal 1`] = `
         className="ModalFooter"
       >
         <button
-          className="Button btn btn-transparent"
+          className="Button btn btn-transparent btn-md"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -8558,7 +9118,7 @@ exports[`Storyshots Components/Modal Large Modal 1`] = `
           Cancel
         </button>
         <button
-          className="Button btn btn-primary"
+          className="Button btn btn-primary btn-md"
           disabled={false}
           type="submit"
         >
@@ -8637,7 +9197,7 @@ exports[`Storyshots Components/Modal Medium Modal 1`] = `
         className="ModalFooter"
       >
         <button
-          className="Button btn btn-transparent"
+          className="Button btn btn-transparent btn-md"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -8645,7 +9205,7 @@ exports[`Storyshots Components/Modal Medium Modal 1`] = `
           Cancel
         </button>
         <button
-          className="Button btn btn-primary"
+          className="Button btn btn-primary btn-md"
           disabled={false}
           type="submit"
         >
@@ -8736,7 +9296,7 @@ exports[`Storyshots Components/Modal Transactional Modal 1`] = `
         className="ModalFooter"
       >
         <button
-          className="Button btn btn-transparent"
+          className="Button btn btn-transparent btn-md"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -8744,7 +9304,7 @@ exports[`Storyshots Components/Modal Transactional Modal 1`] = `
           Cancel
         </button>
         <button
-          className="Button btn btn-primary"
+          className="Button btn btn-primary btn-md"
           disabled={false}
           type="submit"
         >
@@ -8840,7 +9400,7 @@ exports[`Storyshots Components/Modal Warning Modal 1`] = `
         className="ModalFooter"
       >
         <button
-          className="Button btn btn-transparent"
+          className="Button btn btn-transparent btn-md"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -8932,7 +9492,7 @@ exports[`Storyshots Components/Modal With Subtitle Modal 1`] = `
         className="ModalFooter"
       >
         <button
-          className="Button btn btn-transparent"
+          className="Button btn btn-transparent btn-md"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -8940,7 +9500,7 @@ exports[`Storyshots Components/Modal With Subtitle Modal 1`] = `
           Cancel
         </button>
         <button
-          className="Button btn btn-primary"
+          className="Button btn btn-primary btn-md"
           disabled={false}
           type="submit"
         >
@@ -9281,7 +9841,7 @@ exports[`Storyshots Components/Popover Card Popover 1`] = `
   }
 >
   <button
-    className="Button btn btn-primary"
+    className="Button btn btn-primary btn-md"
     disabled={false}
     onClick={[Function]}
     type="button"
@@ -9300,7 +9860,7 @@ exports[`Storyshots Components/Popover Default 1`] = `
   }
 >
   <button
-    className="Button btn btn-primary"
+    className="Button btn btn-primary btn-md"
     disabled={false}
     onClick={[Function]}
     type="button"
@@ -9319,7 +9879,7 @@ exports[`Storyshots Components/Popover Placement 1`] = `
   }
 >
   <button
-    className="Button btn btn-primary"
+    className="Button btn btn-primary btn-md"
     disabled={false}
     onClick={[Function]}
     type="button"
@@ -10128,7 +10688,7 @@ exports[`Storyshots Components/Selects/Async In Modal 1`] = `
         className="ModalFooter"
       >
         <button
-          className="Button btn btn-transparent"
+          className="Button btn btn-transparent btn-md"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -10136,7 +10696,7 @@ exports[`Storyshots Components/Selects/Async In Modal 1`] = `
           Cancel
         </button>
         <button
-          className="Button btn btn-primary"
+          className="Button btn btn-primary btn-md"
           disabled={false}
           type="submit"
         >
@@ -10444,7 +11004,7 @@ exports[`Storyshots Components/Selects/AsyncCreatable In Modal 1`] = `
         className="ModalFooter"
       >
         <button
-          className="Button btn btn-transparent"
+          className="Button btn btn-transparent btn-md"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -10452,7 +11012,7 @@ exports[`Storyshots Components/Selects/AsyncCreatable In Modal 1`] = `
           Cancel
         </button>
         <button
-          className="Button btn btn-primary"
+          className="Button btn btn-primary btn-md"
           disabled={false}
           type="submit"
         >
@@ -10760,7 +11320,7 @@ exports[`Storyshots Components/Selects/Creatable In Modal 1`] = `
         className="ModalFooter"
       >
         <button
-          className="Button btn btn-transparent"
+          className="Button btn btn-transparent btn-md"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -10768,7 +11328,7 @@ exports[`Storyshots Components/Selects/Creatable In Modal 1`] = `
           Cancel
         </button>
         <button
-          className="Button btn btn-primary"
+          className="Button btn btn-primary btn-md"
           disabled={false}
           type="submit"
         >
@@ -11503,7 +12063,7 @@ exports[`Storyshots Components/Selects/Single In Modal 1`] = `
         className="ModalFooter"
       >
         <button
-          className="Button btn btn-transparent"
+          className="Button btn btn-transparent btn-md"
           disabled={false}
           onClick={[Function]}
           type="button"
@@ -11511,7 +12071,7 @@ exports[`Storyshots Components/Selects/Single In Modal 1`] = `
           Cancel
         </button>
         <button
-          className="Button btn btn-primary"
+          className="Button btn btn-primary btn-md"
           disabled={false}
           type="submit"
         >
@@ -14028,7 +14588,7 @@ exports[`Storyshots Components/Table Table With Compact Option 1`] = `
 >
   <div>
     <button
-      className="Button btn btn-outline-primary"
+      className="Button btn btn-outline-primary btn-md"
       disabled={false}
       onClick={[Function]}
       type="button"
@@ -18153,7 +18713,7 @@ exports[`Storyshots Components/Table Table With Multiple Sticky Columns And Head
           }
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -18266,7 +18826,7 @@ exports[`Storyshots Components/Table Table With Multiple Sticky Columns And Head
           }
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -18379,7 +18939,7 @@ exports[`Storyshots Components/Table Table With Multiple Sticky Columns And Head
           }
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -18492,7 +19052,7 @@ exports[`Storyshots Components/Table Table With Multiple Sticky Columns And Head
           }
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -18605,7 +19165,7 @@ exports[`Storyshots Components/Table Table With Multiple Sticky Columns And Head
           }
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -18718,7 +19278,7 @@ exports[`Storyshots Components/Table Table With Multiple Sticky Columns And Head
           }
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -18831,7 +19391,7 @@ exports[`Storyshots Components/Table Table With Multiple Sticky Columns And Head
           }
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -18944,7 +19504,7 @@ exports[`Storyshots Components/Table Table With Multiple Sticky Columns And Head
           }
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19057,7 +19617,7 @@ exports[`Storyshots Components/Table Table With Multiple Sticky Columns And Head
           }
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19170,7 +19730,7 @@ exports[`Storyshots Components/Table Table With Multiple Sticky Columns And Head
           }
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19320,7 +19880,7 @@ exports[`Storyshots Components/Table Table With Single Action Column 1`] = `
           style={Object {}}
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19395,7 +19955,7 @@ exports[`Storyshots Components/Table Table With Single Action Column 1`] = `
           style={Object {}}
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19470,7 +20030,7 @@ exports[`Storyshots Components/Table Table With Single Action Column 1`] = `
           style={Object {}}
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19545,7 +20105,7 @@ exports[`Storyshots Components/Table Table With Single Action Column 1`] = `
           style={Object {}}
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19620,7 +20180,7 @@ exports[`Storyshots Components/Table Table With Single Action Column 1`] = `
           style={Object {}}
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19695,7 +20255,7 @@ exports[`Storyshots Components/Table Table With Single Action Column 1`] = `
           style={Object {}}
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19770,7 +20330,7 @@ exports[`Storyshots Components/Table Table With Single Action Column 1`] = `
           style={Object {}}
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19845,7 +20405,7 @@ exports[`Storyshots Components/Table Table With Single Action Column 1`] = `
           style={Object {}}
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19920,7 +20480,7 @@ exports[`Storyshots Components/Table Table With Single Action Column 1`] = `
           style={Object {}}
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
@@ -19995,7 +20555,7 @@ exports[`Storyshots Components/Table Table With Single Action Column 1`] = `
           style={Object {}}
         >
           <button
-            className="Button btn btn-outline-primary"
+            className="Button btn btn-outline-primary btn-md"
             disabled={false}
             type="button"
           >
diff --git a/src/Button/Button.jsx b/src/Button/Button.jsx
index 815306c6..d1c10684 100644
--- a/src/Button/Button.jsx
+++ b/src/Button/Button.jsx
@@ -8,6 +8,12 @@ import { Button as RBButton } from 'react-bootstrap';
 
 import './Button.scss';
 
+export const BUTTON_SIZES = {
+  LARGE: 'lg',
+  MEDIUM: 'md',
+  SMALL: 'sm',
+};
+
 const Button = forwardRef(({
   children,
   className,
@@ -15,6 +21,7 @@ const Button = forwardRef(({
   isLoading,
   leadingIcon,
   loadingText,
+  size,
   trailingIcon,
   ...props
 }, ref) => (
@@ -23,6 +30,7 @@ const Button = forwardRef(({
     className={classNames('Button', className)}
     disabled={disabled || isLoading}
     ref={ref}
+    size={size}
     {...props}
   >
     { !isLoading ? (
@@ -47,6 +55,7 @@ Button.propTypes = {
   isLoading: PropTypes.bool,
   leadingIcon: PropTypes.object,
   loadingText: PropTypes.string,
+  size: PropTypes.oneOf(Object.values(BUTTON_SIZES)),
   trailingIcon: PropTypes.object,
 };
 
@@ -57,6 +66,7 @@ Button.defaultProps = {
   isLoading: undefined,
   leadingIcon: undefined,
   loadingText: 'Loading...',
+  size: BUTTON_SIZES.MEDIUM,
   trailingIcon: undefined,
 };
 export default Button;
diff --git a/src/Button/Button.scss b/src/Button/Button.scss
index bed10713..0c0fd74f 100644
--- a/src/Button/Button.scss
+++ b/src/Button/Button.scss
@@ -1,7 +1,6 @@
 @import '../../scss/theme';
 
 .Button {
-  @include font-type-30--bold;
 
   i, svg {
     &.icon-left {
@@ -28,6 +27,18 @@
 
   &.btn-sm {
     border-radius: $ux-border-radius;
+    @include font-type-30--medium;
+    padding: 3px 10px;
+  }
+
+  &.btn-md {
+    @include font-type-40--medium;
+    padding: 6px 12px;
+  }
+
+  &.btn-lg {
+    @include font-type-50--medium;
+    padding: 9px 14px;
   }
 
   &.btn-primary {
diff --git a/src/Button/Buttons.stories.jsx b/src/Button/Buttons.stories.jsx
index e1746005..51d25b66 100644
--- a/src/Button/Buttons.stories.jsx
+++ b/src/Button/Buttons.stories.jsx
@@ -77,6 +77,34 @@ export const Primary = () => (
     >
       Confirm
     </Button>
+    {' '}
+    <Button
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="primary"
+    >
+      Confirm
+    </Button>
+    {' '}
+    <Button
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="outline-primary"
+    >
+      Confirm
+    </Button>
+    {' '}
+    <Button
+      disabled
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="primary"
+    >
+      Confirm
+    </Button>
   </>
 );
 
@@ -137,6 +165,34 @@ export const Danger = () => (
     >
       Delete
     </Button>
+    {' '}
+    <Button
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="danger"
+    >
+      Delete
+    </Button>
+    {' '}
+    <Button
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="outline-danger"
+    >
+      Delete
+    </Button>
+    {' '}
+    <Button
+      disabled
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="danger"
+    >
+      Delete
+    </Button>
   </>
 );
 
@@ -197,6 +253,34 @@ export const Warning = () => (
     >
       Edit
     </Button>
+    {' '}
+    <Button
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="warning"
+    >
+      Edit
+    </Button>
+    {' '}
+    <Button
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="outline-warning"
+    >
+      Edit
+    </Button>
+    {' '}
+    <Button
+      disabled
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="warning"
+    >
+      Edit
+    </Button>
   </>
 );
 
@@ -257,6 +341,34 @@ export const Transparent = () => (
     >
       Skip
     </Button>
+    {' '}
+    <Button
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="transparent"
+    >
+      Skip
+    </Button>
+    {' '}
+    <Button
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="outline-transparent"
+    >
+      Skip
+    </Button>
+    {' '}
+    <Button
+      disabled
+      leadingIcon={faFileAlt}
+      size="lg"
+      trailingIcon={faCaretDown}
+      variant="transparent"
+    >
+      Skip
+    </Button>
   </>
 );
 
@@ -469,5 +581,25 @@ export const Loading = () => (
     >
       Confirm
     </Button>
+    {' '}
+    <Button
+      isLoading={boolean('isLoading', true)}
+      leadingIcon={faFileAlt}
+      loadingText={text('loadingText')}
+      size="lg"
+      variant="primary"
+    >
+      Confirm
+    </Button>
+    {' '}
+    <Button
+      isLoading={boolean('isLoading', true)}
+      leadingIcon={faFileAlt}
+      loadingText={text('loadingText')}
+      size="lg"
+      variant="outline-primary"
+    >
+      Confirm
+    </Button>
   </>
 );
diff --git a/src/Button/index.js b/src/Button/index.js
index 803f51fb..00f92ffe 100644
--- a/src/Button/index.js
+++ b/src/Button/index.js
@@ -1,3 +1 @@
-import Button from './Button';
-
-export default Button;
+export { default, BUTTON_SIZES } from './Button';
diff --git a/src/index.js b/src/index.js
index aab2c70b..7db10d8a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,7 +5,7 @@ import {
   AccordionToggle,
 } from 'src/Accordion';
 import { Alert, MessageTypes } from 'src/Alert';
-import Button from 'src/Button';
+import Button, { BUTTON_SIZES } from 'src/Button';
 import Avatar from 'src/Avatar';
 import Card, { CardSizes } from 'src/Card';
 import { CardStack } from 'src/CardStack';
@@ -95,6 +95,7 @@ export {
   AsyncCreatableSelect,
   bugsnagClient,
   Button,
+  BUTTON_SIZES,
   BUTTON_GROUP_ORIENTATIONS,
   Card,
   CardSizes,