diff options
| author | Derick Montague <derick.montague@ibm.com> | 2020-11-16 21:10:32 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2020-11-16 21:10:32 +0300 |
| commit | ab93192e39e100b642aed9754adac12f590fd581 (patch) | |
| tree | 7e4c5396df1fc1e44d166c1fd3aaaa987780ff08 /docs/guide/components/buttons | |
| parent | e6e924527fb58de46ef70fb016d120f2eefbb01b (diff) | |
| download | webui-vue-ab93192e39e100b642aed9754adac12f590fd581.tar.xz | |
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
Diffstat (limited to 'docs/guide/components/buttons')
| -rw-r--r-- | docs/guide/components/buttons/button-disabled.png | bin | 0 -> 6472 bytes | |||
| -rw-r--r-- | docs/guide/components/buttons/button.png | bin | 0 -> 9579 bytes | |||
| -rw-r--r-- | docs/guide/components/buttons/index.md | 35 |
3 files changed, 35 insertions, 0 deletions
diff --git a/docs/guide/components/buttons/button-disabled.png b/docs/guide/components/buttons/button-disabled.png Binary files differnew file mode 100644 index 00000000..3aa9ba1f --- /dev/null +++ b/docs/guide/components/buttons/button-disabled.png diff --git a/docs/guide/components/buttons/button.png b/docs/guide/components/buttons/button.png Binary files differnew file mode 100644 index 00000000..a751f932 --- /dev/null +++ b/docs/guide/components/buttons/button.png 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 + + + +### Disabled buttons + + + + +```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 |
