diff --git a/docs/.vuepress/components/BmcButtons.vue b/docs/.vuepress/components/BmcButtons.vue
new file mode 100644
index 0000000..2035e4d
--- /dev/null
+++ b/docs/.vuepress/components/BmcButtons.vue
@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <h3 class="h4">Enabled</h3>
+        <b-button variant="primary">Primary</b-button>
+        <b-button variant="primary">
+            <icon-add />
+            <span>Primary with icon</span>
+        </b-button>
+        <b-button variant="secondary">Secondary</b-button>
+        <b-button variant="danger">Danger</b-button>
+        <b-button variant="link">Link Button</b-button>
+        <b-button variant="link">
+            <icon-add />
+            <span>Link Button</span>
+        </b-button>
+
+        <h3 class="h4">Disabled</h3>
+        <b-button disabled variant="primary">Primary</b-button>
+        <b-button disabled variant="primary">
+            <icon-add />
+            <span>Primary with icon</span>
+        </b-button>
+        <b-button disabled variant="secondary">Secondary</b-button>
+        <b-button disabled variant="danger">Danger</b-button>
+        <b-button disabled variant="link">Link Button</b-button>
+        <b-button disabled variant="link">
+            <icon-add />
+            <span>Link Button</span>
+        </b-button>
+    </div>
+</template>
+
+<script>
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconArrowRight from '@carbon/icons-vue/es/arrow--right/16';
+export default {
+    name: 'BmcButtons',
+    components: { IconAdd, IconArrowRight }
+}
+</script>
+<style scoped>
+    button {
+        margin-bottom: 1rem;
+        margin-right: .5rem;
+    }
+
+    h3 {
+        margin: .5rem 0 1rem;
+    }
+</style>
\ No newline at end of file
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 5a8e601..2be074e 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -42,7 +42,10 @@
           },
           {
             title: "Components",
-            children: ["/guide/components/", "/guide/components/page-section"]
+            children: [
+            "/guide/components/",
+            "/guide/components/button",
+          ]
           }
         ],
         "/themes/": [""]
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
new file mode 100644
index 0000000..59c1f92
--- /dev/null
+++ b/docs/.vuepress/enhanceApp.js
@@ -0,0 +1,10 @@
+
+import "../../src/assets/styles/_obmc-custom.scss";
+import {
+    ButtonPlugin
+  } from 'bootstrap-vue';
+
+
+export default ({ Vue }) => {
+      Vue.use(ButtonPlugin);
+}
\ No newline at end of file
diff --git a/docs/guide/components/button.md b/docs/guide/components/button.md
new file mode 100644
index 0000000..aeb93ed
--- /dev/null
+++ b/docs/guide/components/button.md
@@ -0,0 +1,23 @@
+# Buttons
+
+Buttons are used to perform an action. The main buttons in the application are the `primary` and `secondary` buttons. Buttons, like all Boostrap-vue components can be themed by setting the `variant` prop on the component to one of the [theme-color map keys](/guide/guidelines/colors). To create a button that looks like a link, set the variant value to `link`.
+
+[Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button)
+
+<BmcButtons />
+
+```vue
+// Enabled Buttons
+<b-button variant="primary">Primary</b-button>
+<b-button variant="primary">
+  <icon-add />
+  <span>Primary with icon</span>
+</b-button>
+<b-button variant="secondary">Secondary</b-button>
+<b-button variant="danger">Danger</b-button>
+<b-button variant="link">Link Button</b-button>
+<b-button variant="link">
+  <icon-add />
+  <span>Link Button</span>
+</b-button>
+```
\ No newline at end of file
diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss
index 2f961e0..b9b8073 100644
--- a/src/assets/styles/_buttons.scss
+++ b/src/assets/styles/_buttons.scss
@@ -1,8 +1,14 @@
 .btn {
   font-weight: $headings-font-weight;
-  svg {
-    vertical-align: sub;
-    margin-left: $spacer / 2;
+  padding-top: $spacer / 2;
+  padding-right: $spacer;
+  padding-bottom: $spacer / 2;
+  padding-left: $spacer;
+
+  // Buttons with SVGs and text expect
+  // text to be wrapped in a span element
+  svg + span {
+    margin-left: $spacer / 4;
   }
 }
 
@@ -17,10 +23,21 @@
 .btn-link {
   fill: $primary;
   text-decoration: none !important;
+
   &:focus {
     box-shadow: $btn-focus-box-shadow;
   }
   &:hover {
     fill: darken($primary, 15%);
   }
+}
+
+.btn:disabled {
+  color: $gray-600;
+  fill: currentColor;
+
+  &:not(.btn-link) {
+    border-color: $gray-400;
+    background-color: $gray-400;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index 3199cab..40fb744 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -52,6 +52,7 @@
 
   svg {
     margin-left: 0;
+    vertical-align: sub;
   }
 }
 </style>