diff options
Diffstat (limited to 'docs/guide/components/buttons/index.md')
-rw-r--r-- | docs/guide/components/buttons/index.md | 39 |
1 files changed, 29 insertions, 10 deletions
diff --git a/docs/guide/components/buttons/index.md b/docs/guide/components/buttons/index.md index ca78201b..da569a15 100644 --- a/docs/guide/components/buttons/index.md +++ b/docs/guide/components/buttons/index.md @@ -4,15 +4,13 @@ Buttons are used to perform an action. The main buttons in the application are t [Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button) +### Icon only buttons +Add `btn-icon-only` class to the button and add `title` attribute to get helper text on hover over the 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> @@ -20,11 +18,6 @@ Buttons are used to perform an action. The main buttons in the application are t <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> @@ -32,4 +25,30 @@ Buttons are used to perform an action. The main buttons in the application are t <icon-add /> <span>Link Button</span> </b-button> +<b-button variant="link" title="Delete" class="btn-icon-only"> + <icon-trashcan /> +</b-button> +``` + +### Disabled buttons + +![Disabled button examples](./button-disabled.png) + +```vue +// Disabled Buttons +<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> +<b-button disabled variant="link" title="Delete" class="btn-icon-only"> + <icon-trashcan /> +</b-button> ```
\ No newline at end of file |