diff options
| author | SurenNeware <sneware9@in.ibm.com> | 2021-02-24 14:13:49 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2021-03-02 08:32:04 +0300 |
| commit | a9de9148bab7a1b76cfc76f9891dd6a4b3adeb2a (patch) | |
| tree | 725a57269bd0aa8e19ffa0ba87f4d646d8632462 /docs/guide | |
| parent | aa5e950b219343fff77ddde855088e694806edf8 (diff) | |
| download | webui-vue-a9de9148bab7a1b76cfc76f9891dd6a4b3adeb2a.tar.xz | |
Update button documentation for icon only button
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I93aa1082880985fef316424a9cf400a9d0a8c2b3
Diffstat (limited to 'docs/guide')
| -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  -### Disabled buttons - - - - ```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 + + + +```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 |