diff options
| author | Derick Montague <derick.montague@ibm.com> | 2020-03-04 09:59:47 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2020-03-20 21:26:14 +0300 |
| commit | 3f6710a09c953405cc0bc8014eab89887122b17d (patch) | |
| tree | 713e6118de3922bee39a690e2e3361069697056e /docs/guide/components/button.md | |
| parent | a06fe4695e7e4c09ea07540d3353cb05c36f1e37 (diff) | |
| download | webui-vue-3f6710a09c953405cc0bc8014eab89887122b17d.tar.xz | |
Add buttons documentation
- Add documentation for how to use buttons
- Update markup and CSS rulesets to support icons on the left or the
right of text
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ic897f416e85824287360bc7ef5dc47c402d64eba
Diffstat (limited to 'docs/guide/components/button.md')
| -rw-r--r-- | docs/guide/components/button.md | 23 |
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 |