From ab93192e39e100b642aed9754adac12f590fd581 Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Mon, 16 Nov 2020 12:10:32 -0600
Subject: Fix docs button alignment and image path

- Create directory in order to use relative path for images and better
organize content

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ia5085c1b72c162016ed4da037a15f5f53c744742
---
 docs/guide/components/buttons/index.md | 35 ++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 docs/guide/components/buttons/index.md

(limited to 'docs/guide/components/buttons/index.md')

diff --git a/docs/guide/components/buttons/index.md b/docs/guide/components/buttons/index.md
new file mode 100644
index 00000000..ca78201b
--- /dev/null
+++ b/docs/guide/components/buttons/index.md
@@ -0,0 +1,35 @@
+# 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)
+
+### Enabled buttons
+
+![Button examples](./button.png)
+
+### Disabled buttons
+
+![Disabled button examples](./button-disabled.png)
+
+
+```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="link">
+  <icon-trashcan />
+  <span class="sr-only">Delete</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
-- 
cgit v1.2.3