summaryrefslogtreecommitdiff
path: root/docs/guide/components/button.md
diff options
context:
space:
mode:
Diffstat (limited to 'docs/guide/components/button.md')
-rw-r--r--docs/guide/components/button.md23
1 files changed, 23 insertions, 0 deletions
diff --git a/docs/guide/components/button.md b/docs/guide/components/button.md
new file mode 100644
index 00000000..aeb93edc
--- /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