commit a9de9148bab7a1b76cfc76f9891dd6a4b3adeb2a
author SurenNeware <sneware9@in.ibm.com> Wed Feb 24 16:43:49 2021 +0530
committer Derick Montague <derick.montague@ibm.com> Tue Mar 02 05:32:04 2021 +0000
tree 725a57269bd0aa8e19ffa0ba87f4d646d8632462
parent aa5e950b219343fff77ddde855088e694806edf8

Update button documentation for icon only button

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I93aa1082880985fef316424a9cf400a9d0a8c2b3

docs/guide/components/buttons/index.md

diff --git a/docs/guide/components/buttons/index.md b/docs/guide/components/buttons/index.md
index ca78201..da569a1 100644
--- a/docs/guide/components/buttons/index.md
+++ b/docs/guide/components/buttons/index.md
@@ -4,15 +4,13 @@
 
 [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 @@
   <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 @@
   <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